jQuery carousel - lặp quay vòng với carouFredSel
carouFredSel là plugin của jQuery giúp chuyển đổi bất kỳ phần tử HTML nào thành dạng lặp quay vòng carousel.
Plugin có thể chuyển đổi một hoặc nhiều phần tử một lần, theo cả chiều ngang hoặc dọc. Bạn có thể cấu hình cho carousel chạy tự động và (hoặc) chạy khi có sự tác động của người xem (ấn chuột hoặc sử dụng bàn phím).
carouFredSel hoạt động với các phần tử cao thấp khác nhau, tương thích với hầu hết plugin lightbox của jQuery.
Cách sử dụng
Trước tiên bạn cần thêm các file javascript cần thiết vào thẻ <head> của website:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script> <!-- Mặc định chỉ support hiệu ứng swing và linear, nếu bạn muốn sử dụng thêm phải gắn jquery easing plugin --> <script type="text/javascript" src="jquery.easing.1.3.js"></script>
<!-- Thêm jquery nap plugin giúp tự động dừng casrousel khi người dùng không sử dụng máy tính (mặc định là 1 phút) --> <script type="text/javascript" src="jquery.nap-1.0.0.js"></script>
Link download jquery nap và jquery easing
Tiếp theo là nội dung mã HTML, bạn có thể sử dụng theo các cách sau:
Một danh sách các ảnh (thẻ img)
<div id="foo"> <img src="img1.jpg" /> <img src="img2.jpg" /> <img src="img3.jpg" /> <img src="img4.jpg" /> <img src="img5.jpg" /> <img src="img6.jpg" /> <img src="img7.jpg" /> <img src="img8.jpg" /> </div>
Ordered or unordered list
<ul id="foo"> <li> c </li> <li> a </li> <li> r </li> <li> o </li> <li> u </li> <li> F </li> <li> r </li> <li> e </li> <li> d </li> <li> S </li> <li> e </li> <li> l </li> </ul>
Hoặc đoạn mã HTML tùy theo ý của bạn:
<div id="foo"> <div> <h3>Infinity</h3> <p>A concept that in many fields refers to a quantity without bound or end.</p> </div> <div> <h3>Circular journey</h3> <p>An excursion in which the final destination is the same as the starting point.</p> </div> <div> <h3>jQuery</h3> <p>jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.</p> </div> <div> <h3>Carousel</h3> <p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p> </div> </div>
Gọi plugin lên làm việc: Thêm vào thẻ <head> (bên dưới các script) đoạn mã sau:
$(document).ready(function() {
// Sử dụng cấu hình mặc định
$("#foo1").carouFredSel();
// Tùy biến cấu hình
$("#foo2").carouFredSel({
items : 2,
direction : "up",
scroll : {
items : 1,
effect : "easeOutBounce",
duration : 1000,
pauseOnHover : true
}
});
});
Bạn có thích bài viết này?
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 
. 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.