Slideshow đơn giản với Cycle2 plugin của jQuery

GIỚI THIỆU

Cycle là một plugin jQuery đã có từ rất lâu và được nhiều người biết đến, và nay đã có phiên bản mới nhất, cải thiện nhiều tính năng, đó là  Cycle2.

Plugin này rất phù hợp đối với các slideshow với yêu cầu có độ tuỳ biến cao, vì bạn hoàn toàn chủ động cho việc khai báo HTML và CSS. 

Cycle2 hỗ trợ giao diện responsive, có nhiều thuộc tính tuỳ chọn cho cả slideshow hoặc từng slide và mở rộng thông qua API.

TÍNH NĂNG

• Hỗ trợ nhiều trình duyệt
• Không cần viết script khởi tạo!
• Hoàn toàn Responsive
• Dễ dàng tuỳ biến theo từng slide 
• Dễ dàng mở rộng sử dụng API
• Thông minh, khởi tạo sau khi đã load xong hình ảnh
• Hỗ trợ load hình ảnh một cách liên tục
• Hỗ trợ sẵn các tính năng: phân trang, tiêu đề, overlays, điều khiển 
• Hỗ trợ thao tác vuốt trên thiết bị di động
• Cung cấp nhiều hiệu ứng: Fade, scroll, shuffle, tile và carousel transitions
• Hỗ trợ đánh dấu slide 
• và còn rất nhiều nữa

HƯỚNG DẪN SỬ DỤNG

1. Thêm vào Javascript

<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include Cycle2 -->
<script src="hhttps://cdn.rawgit.com/malsup/cycle2/2.1.6/build/jquery.cycle2.min.js"></script>

2. HTML

<div class="cycle-slideshow">
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>

Bạn thấy đấy, chúng ta không cần phải gọi một dòng javascript nào để khởi tạo slideshow, Cycle2 sẽ tự động đọc HTML và biết phải làm gì, rất đơn giản và tiện lợi

TUỲ BIẾN

Cycle2 hỗ trợ nhiều hiệu ứng và tuỳ biến nâng cao, bạn có thể tham khảo tại đây

DEMO

See the Pen cycle2 slideshow demo by Thanh Nguyen (@genievn) on CodePen.