Nếu đã từng tìm hiểu về jQuery slideshow plugin, hẳn bạn đã biết jQuery Cycle, một plugin rất phổ biến & lâu đời về slideshow. Mới đây plugin đã được nâng cấp lên phiên bản mới:
Cycle2.
Cycle2 trở thành sự lựa chọn hoàn hảo cho việc tạo & tùy biến slideshow. Cycle2 hỗ trợ responsive layout, bạn có thể tùy biến mọi thứ ở slide của mình (thậm chí là chỉnh sửa từng slide của 1 slideshow thông qua API của Cycle2).
Phiên bản mới hỗ trợ việc tải ảnh khi cần thiết. Ví dụ khi bạn tạo 1 slideshow không chạy tự động (người dùng phải ấn nút để chuyển slide),ảnh sẽ chỉ được tải về khi người dùng ấn nút chuyển slide, giúp tiết kiệm nhiều băng thông.
Cycle2 hỗ trợ các hiệu ứng fade, scroll, shuffle, tile và carousel. Mỗi slide có tùy chỉnh URL riêng vã hỗ trợ cho mobile (vuốt để slide).
Cách sử dụng
Về cách sử dụng, Cycle2 sử dụng rất đơn giản, tất cả việc bạn cần làm là thêm jQuery và Cycle2 vào trang web. Sau đó khai báo thành phần của slideshow và việc còn lại của bạn là thưởng thức slideshow của mình.
Mã HTML gắn jQuery và Cycle2:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
Mã HTML với slideshow đơn giản nhất (Cycle2 cũng giống như Cycle là không phụ thuộc vào các thẻ HTML)
<div class="cycle-slideshow">
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" />
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" />
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" />
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" />
</div>
cycle-slideshow là tên class đặc biệt của Cycle2, bạn chỉ cần đặt tên như vậy là slideshow sẽ tự động khởi tạo khi trang web được tải về trình duyệt.
Các lựa chọn cơ bản
Bạn có thể tùy biến slideshow bằng việc thêm vào các thuộc tính data-cycle-*. Ví dụ dưới đây tùy biến hiệu ứng, sự kiện dừng slideshow khi di chuột vào, và tốc độ slideshow:
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="200">
<img src="http://malsup.github.com/images/p1.jpg" />
<img src="http://malsup.github.com/images/p2.jpg" />
<img src="http://malsup.github.com/images/p3.jpg" />
<img src="http://malsup.github.com/images/p4.jpg" />
</div>