Hướng dẫn tạo Slider show jQuery

Slider show là hiệu ứng rất quạn trọng trong thiết kế website. Sau đây DIM GROUP xin hướng dẫn các bạn tạo Slider show sử dụng Jquery. 

 Slider show, hiệu ứng thiết kế website, hiệu ứng website đẹp

Việc thực hiện Nivo Slider jQuery plugin khá đơn giản. Bạn chỉ cần đoạn code sau vào tag <head> trong website của bạn

 

<link rel="stylesheet" href="nivo-slider.css" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript">

</script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Add markup

Mã HTML cho Nivo Slider cũng rất đơn giản. Ban chỉ cần tạo một DIV với id là #slider, sau đó thêm đường dẫn hình ảnh vào

<div id="slider" class="nivoSlider"> <img src="images/slide1.jpg" alt="" /> <a href="http://dev7studios.com">

<img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>

<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />

<img src="images/slide4.jpg" alt="" /> </div> <div id="htmlcaption" class="nivo-html-caption">

<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

</div>

Phần khởi tạo hàm cho Slider, bạn thêm đoạn code sau vào trong thẻ <head>

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

Đây là những thiết lập của NIvo Slider, bạn có thể tuỳ ý chỉnh sửa theo ý thích của mình

$('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown'

slices: 15, // For slice animations

boxCols: 8, // For box animations

boxRows: 4, // For box

animations animSpeed: 500, // Slide transition speed

pauseTime: 3000, // How long each slide will show

startSlide: 0, // Set starting Slide (0 index)

directionNav: true, // Next & Prev navigation

controlNav: true, // 1,2,3... navigation

controlNavThumbs: false, // Use thumbnails for Control Nav

pauseOnHover: true, // Stop animation while hovering

manualAdvance: false, // Force manual transitions

prevText: 'Prev', // Prev directionNav text

nextText: 'Next', // Next directionNav text

randomStart: false, // Start on a random slide

beforeChange: function(){}, // Triggers before a slide transition

afterChange: function(){}, // Triggers after a slide transition

slideshowEnd: function(){}, // Triggers after all slides have been shown

lastSlide: function(){}, // Triggers when last slide is shown

afterLoad: function(){} // Triggers when slider has loaded });

Slider show, hiệu ứng slider show, hiệu ứng thiết kế website

 

Vậy là bạn đã hoàn thanh xong NIvo Slider show cho website của mình.

Đây là video hướng dẫn cách thực hiện đầy đủ từ a-z

 

 

Bạn tải DEMO và mã nguồn ở đây

 

Namnt
DMCA.com