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