jQuery slideshow (Nivo Slider) cho web

Xin giới thiệu slideshow dùng làm quảng cáo trong web có tên là Nivo Slider. Kết hợp giữa jquery, css để tạo ra slideshow hiệu ứng ngẫu nhiên cho từng slideshow mượt mà.

 

Demo

http://thietkeweb123.com/demo/nivo-slider/demo/

Link download mã nguồn

http://thietkeweb123.com/demo/nivo-slider.rar

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:

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 });