jQuery Content Slider - Diapo: Sẵn sàng cho trình duyệt di động

Đăng bởi Neo trong mục Hướng dẫn vào 16 tháng 9, 2011 | Comments
Xem Demo Tải về

Diapo là plugin của jQuery giúp bạn tạo nội dung trượt, slideshow... với nhiều hiệu ứng đẹp (bạn cũng có thể tùy biến các hiệu ứng này bằng cách định nghĩa số lượng hàng, cột để slice).

Diapo có thể hiển thị ảnh, video hay bất kỳ thành phần nào của HTML. Plugin hỗ trợ tính năng riêng cho mobile, bạn có thể tắt tính năng này nếu website của bạn không hỗ trợ mobile.

Diapo yêu cầu jQuery 1.4 trở lên, và các plugin: jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/), jQuery HoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html), jQuery Mobile (http://jquerymobile.com/)

Cách sử dụng

Trước tiên bạn cần thêm jQuery và các plugin mà Diapo yêu cầu vào HTML:

<script type='text/javascript' src='scripts/jquery.min.js'></script>
  <script type='text/javascript' src='scripts/jquery.mobile-1.0b2.min.js'></script>
  <script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
  <script type='text/javascript' src='scripts/jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='scripts/diapo.js'></script>

Gọi Diapo lên làm việc:

jQuery(function(){
	// Cách gọi cơ bản 
	$('selector').diapo();
  // Ví dụ cách tùy biến:
  $('selector').diapo({fx: 'scrollHorz', time: '5000'});
});

Cấu trúc HTML dạng thẻ div đơn giản, bạn có thể xem thêm các tùy biến và cách sử dụng với flash, mobile... tại trang chủ của plugin

slideshow, slider, jquerymobile, jquery

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