Nivo Slider là một plugin trình diễn ảnh rất tuyệt. Các nhà thiết kế khá là yêu thích và tích hợp vào sản phẩm của mình, điển hình là bác HuTek với Eblogviet. Nó hổ trợ đến 9 kiểu chuyển động khác nhau mà không dùng đến flash.

Nivo Slider - Trình diễn ảnh chuyên nghiệp

Nivo Slider - Trình diễn ảnh chuyên nghiệp

Để sử dụng bạn cần phiên bản mới nhất của jquery và Nivo Slider.

Thêm đoạn code sau vào thẻ <head> của trang web:

<link rel="stylesheet" href="duongdan/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="duongdan/jquery.nivo.slider.pack.js" type="text/javascript"></script>

Bây giờ bạn thêm đoạn code để hiển thị. Bạn có thể thêm liên kết (link) cho ảnh, tiêu đề của ảnh chính là thuộc tính title của thẻ img.

<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>

Để có thể hoạt động, bạn thêm đoạn code sau để gọi plugin.

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>

Bạn có thể tham khảo chi tiết các tùy chọn khác như hiệu ứng, thời gian, nút điều khiển, … tại trang chủ của plugin.

Với thần dân của tín đồ WordPress thì không cần thiết phải làm thủ công như trên, bạn chỉ việc sủ dụng plugin được thiết kế riêng cho WP tại đây.

Chúc các bạn vui vẻ