Tạo slideshow chuyên nghiệp với skitter

Có rất nhiều thư viện jquery tạo slideshow ảnh cho website điển hình như flexslider, nivoSlider,..mỗi cái có ưu điểm và giao diện tùy biến riêng. Bạn có thể chọn cho mình một thư viện slideshow để chèn phù hợp vào web của bạn.
Trong bài hôm nay mình tiếp tục giới thiệu đến những ai đang tự học lập trình web có thể thiết kế website mà không cần mướn lập trình viên, bạn có thể tạo slideshow chèn vào web một cách chuyên nghiệp với thư viện skitter.

Cài đặt

Trước tiên, truy cập vào http://www.skitter-slider.net/, nhấn vào Download để tải thư viện về máy.
Giải nén file zip và up lên host. Thêm các files CSS và JS sau trong thẻ head.

<link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>

Tiếp đến, thêm thẻ HTML cấu tạo slider, như cách truyền thống chúng ta sử dụng thẻ ul, li, div

<div class="box_skitter box_skitter_large">
	<ul>
		<li>
			<a href="#cut"><img src="images/001.jpg" class="cut" /></a>
			<div class="label_text"><p>cut</p></div>
		</li>
		<li>
			<a href="#swapBlocks"><img src="images/002.jpg" class="swapBlocks" /></a>
			<div class="label_text"><p>swapBlocks</p></div>
		</li>
		<li>
			<a href="#swapBarsBack"><img src="images/003.jpg" class="swapBarsBack" /></a>
			<div class="label_text"><p>swapBarsBack</p></div>
		</li>
	</ul>
</div>

Cuối cùng, khởi tạo skiter bằng js này.

<script type="text/javascript" language="javascript">
	$(document).ready(function() {
		$(".box_skitter_large").skitter();
	});
</script>

Nâng cao

Tùy biến skitter sử dụng options cấu hình cho slideshow, bạn có thể sử dụng thuộc tính option để thay đổi skitter khác theo cách sử lý mặc định.
Xem tài liệu chi tiết: http://www.skitter-slider.net/documentation.
Ví dụ:

<script type="text/javascript">
	$(document).ready(function() {
		$('.box_skitter_large').skitter({
			theme: 'round',	//áp dụng theme "round".
			dots: true, 
			preview: true,
			numbers_align: 'center'
		});
	});
</script>

Điểm cộng cho skitter mà các thư viện slideshow khác mình chưa thấy hỗ trợ là chế độ xem trước, khi dê chuột vào nút nhảy slide.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook