jCarouselLite hỗ trợ điện thoại cảm ứng

Để jCarouselLite hỗ trợ các thao tác vuốt (swipe) của người dùng trên điện thoại thông minh. Bạn cần thêm thư viện touchSwipe,  thư viện hỗ trợ đầy đủ các loại máy như iPhone, iPad, Android, ...

Tính năng nổi bật của TouchSwipe 

  • Nhận diện 4 hướng vuốt của người dùng: vuốt lên trên, xuống dưới, sang trái, sang phải.
  • Nhận biết sự kiện chạm tay vào màn hình, và nhấc khỏi màn hình.
  • Hỗ trợ sự kiện touch với 1 ngón tay và 2 ngón.
  • Hỗ trợ sự kiện click và swipe (vuốt) ở object cha và con.
  • Có thể bắt chính xác các sự kiện diễn ra trong quá trình vuốt như: bắt đầu, di chuyển, kết thúc,...
  • Có thể khóa sự kiện vuốt cho bất cứ phần tử nào như button, form, text, ...

Sử dụng thư viện touchSwipe cho jCarouselLite giúp Slide hỗ trợ điện thoại smartphone

Bước 1: Tải thư viện touchSwipe, jCarousel Lite và jquery, Chèn vào thẻ <head>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="http://dev.vncdata.com/theme/default/js/jcarousellite.js"></script>

Bước 2: Sửa chữa đôi chút trong file jcarousellite.js

Tìm đoạn

if(o.btnNext) {

Thêm vào sau đoạn trên

if(o.swipe) {
div.swipe({
 swipe:function(event, direction, distance, duration, fingerCount){
   if(direction == 'right')  {
       stopAuto();
       return go(curr-o.scroll);
   }

Bước 3: Khai báo sử dụng sự kiện swipe cho jcarousellite

<script type="text/javascript">
jQuery('.tab-slider').jCarouselLite({
        auto: 1800,
        visible: 2,
        hoverPause: true,
        swipe: true,
        speed: 1000,
});
</script>

Tags:

Bài viết cùng chủ đề