Nivo Slider - jQuery image slider plugin

Nivo Slider plugin hiển thị nút Next và Previous và các nút định hướng cho việc chọn ảnh. Plugin không hỗ trợ trình duyệt IE6
Cách sử dụng
Jquery Nivo Slider

nivo slider jquery dep

Nivo Slider làm việc với jQuery 1.4, vì vậy bạn cần phải download jQuery 1.4 và Nivo Slider, sau đó thêm vào trong thẻ <head> của trang web:
1
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
2
<script src="js/jquery1.4.2.min.js" type="text/javascript"></script>
3
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
Tiếp theo là mã HTML, để thêm caption cho ảnh, bạn chỉ cần đặt caption vào thuộc tính title của ảnh. Nivo Slider cũng hỗ trợ link ảnh
1
<div id="slider">
2
    <img src="images/slide1.jpg" alt="" />
3
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
4
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
5
    <img src="images/slide4.jpg" alt="" />
6
</div>
Cuối cùng là gọi plugin làm việc
1
$(window).load(function() {
2
    $('#slider').nivoSlider();
3
});

Tất nhiên là bạn có thể tùy chọn các hiệu ứng, thời gian chuyển động, thời gian dừng, ẩn/ hiện các nút điều khiển... Các thông tin này bạn có thể xem thêm trên trang chủ của plugin.

Bạn có thể xem thêm các website mà công ty thiết kế website Dynatech đã áp dụng Nivo Slider: