Cấp bậc tác giả:

HTML

Hướng dẫn làm Slideshow với Cycle2

Được viết bởi webmaster ngày 13/08/2013 lúc 05:50 PM
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.
  • 0
  • 1655
Tải tệp tin: Click ở đây

Hướng dẫn làm Slideshow với Cycle2


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).

slideshowwithcycle2.jpg

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>

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML