Cuộn nội dung với Sly

Đăng bởi Neo trong mục Hướng dẫn vào 14 tháng 11, 2012 | Comments

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

bạn có thể xem chi tiết về options và returnInstance trong file README để hiểu hơn về cách sử dụng cơ bản cũng như nâng cao của plugin

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter