Nivo Slider - jQuery image slider plugin

Đăng bởi Neo trong mục Hướng dẫn vào 24 tháng 3, 2010 | Comments
Xem Demo

Nivo Slider - một plugin khác của jQuery giúp bạn có thể tạo các slide ảnh không thua kém flash. Nivo Slider hỗ trợ tới 9 kiểu chuyển động khác nhau.

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

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:

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="js/jquery1.4.2.min.js" type="text/javascript"></script>
<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

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

Cuối cùng là gọi plugin làm việc

$(window).load(function() {
	$('#slider').nivoSlider();
});

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

Update ngày 29/06/2010: Nivo slider đã có plugin cho Wordpress, Drupal và module cho Joomla

slideshow, slider, plugin, jquery, gallery

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter