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>

Trên trang Cycle2 có đầy đủ tài liệu và ví dụ giúp bạn dễ dàng học và sử dụng plugin.