Đầu tiên cho cái này vào Header ở cuối

Code:

<script type="text/javascript" src="http://mohinhtinh.com/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({controlNav: false, directionNavHide: false});
    });
    </script>

Tiếp theo cho cái này vào vị trí mình muốn hiển thị ảnh

Code:

 <div align="center" style="margin: 0 0 0px -1px">

  <link rel="stylesheet" href="http://mohinhtinh.com/nivo-slider/themes/default/default.css" type="text/css" media="screen">
        <link rel="stylesheet" href="http://mohinhtinh.com/nivo-slider/nivo-slider.css" type="text/css" media="screen">                 
          <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider" style="position: relative; background-image: url(http://mohinhtinh.com/nivo-slider/images/8.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: no-repeat no-repeat; ">
            <img src="http://mohinhtinh.com/nivo-slider/images/8.jpg" alt="" style="display: none; ">
            <img src="http://mohinhtinh.com/nivo-slider/images/7.jpg" alt="" style="display: none; ">
            <img src="http://mohinhtinh.com/nivo-slider/images/1.jpg" alt="" style="display: none; ">
            <img src="http://mohinhtinh.com/nivo-slider/images/2.jpg" alt="" style="display: none; ">
            <img src="http://mohinhtinh.com/nivo-slider/images/6.jpg" alt="" style="display: none; ">
            <img src="http://mohinhtinh.com/nivo-slider/images/3.jpg" alt="" style="display: none; ">
            <img src="http://mohinhtinh.com/nivo-slider/images/4.jpg" alt="" style="display: none; ">
        <div class="nivo-caption" style="opacity: 0; "><p></p></div>
  <div class="nivo-directionNav">
  <a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>
 <div class="nivo-slice" style="left: 0px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: 0px 0%; background-repeat: no-repeat no-repeat; "></div>
  <div class="nivo-slice" style="left: 59px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -59px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 118px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -118px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 177px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -177px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 236px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -236px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 295px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -295px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 354px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -354px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 413px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -413px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 472px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -472px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 531px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -531px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 590px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -590px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 649px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -649px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 708px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -708px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 767px; width: 59px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -767px 0%; background-repeat: no-repeat no-repeat; "></div><div class="nivo-slice" style="left: 826px; width: 54px; background-image: url(http://mohinhtinh.com/nivo-slider/images/7.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; bottom: 0px; height: 100%; opacity: 1; background-position: -826px 0%; background-repeat: no-repeat no-repeat; "></div></div>
    </div>
                  </div>     

Có thể cho code bên trên vào HEader trên code

Code:

              <div class="pun">

nguồn: cntt-k3