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

HTML

Hướng dẫn Cuộn nội dung với Sly

Được viết bởi webmaster ngày 13/08/2013 lúc 05:43 PM
Hẳn bạn đã biết đến dạng slide carousel với plugin rất nổi tiếng carouFredSel. Với Sly bạn còn có nhiều lựa chọn hơn nữa: cuộn ngang, dọc, cuộn nội dung vô tận (ví dụ như khi bạn xem feed ở facebook).
  • 0
  • 1526
Tải tệp tin: Click ở đây

Hướng dẫn Cuộn nội dung với Sly


Hẳn bạn đã biết đến dạng slide carousel với plugin rất nổi tiếng carouFredSel. Với Sly bạn còn có nhiều lựa chọn hơn nữa: cuộn ngang, dọc, cuộn nội dung vô tận (ví dụ như khi bạn xem feed ở facebook).

slytuts.jpg

Cũng như carouFredSel, bạn có thể dùng Sly để cuộn bất kỳ phần tử nào của HTML (thẻ div, thẻ image, li...). Plugin cũng cho bạn nhiều lựa chọn khác nhau như tự động đặt vị trí cho phần tử tiếp theo hoặc luôn luôn căn giữa phần tử.
Lựa chọn "dragContent" giúp bạn dùng chuột kéo các nội dung trong slide (tuy nhiên khi thử trên thiết bị cảm ứng thì chưa được).

Cách sử dụng

Sử dụng Sly cũng giống như các plugin khác của jQuery, rất đơn giản:
- Thêm jQuery, Sly và các plugin mà Sly yêu cầu:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

<script src="jquery.sly.js"></script>
<script src="js/vendor/plugins.js"></script>

Code này mình xem ở trang của Sly, tác giả có một cách xử lý rất hay: dùng thư viện jQuery ở Google CDN, nhưng nếu trường hợp bị lỗi thì sẽ tự động tải jQuery ở trên server của Sly.

- Mã HTML có thể là như sau:

<div id="frame">
<ul class="slidee">
<li></li> // Item          
<li></li> // Item
<li></li> // Item      
  </ul>  
</div>
                
- Gọi sly lên làm việc:

$frame.sly( [ options [, returnInstance ]] );

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