owl carousel cách sử dụng thanh cuộn Ngang?

Question

Tôi đang sử dụng thư viện js owl-carousel. Tôi cần tính năng thanh cuộn ngang. Tôi cố gắng này:

$("#owl-demo").owlCarousel({ 
      Horizontal: true, // not working this 
      items : 4, 
      itemsDesktop : [1199,3], 
      itemsDesktopSmall : [979,3], 
      itemsTablet: [2400,4], //2 items between 600 and 0 
      itemsMobile :[1200,4]   
     }); 

Click this reference

Answer 1

Bạn có thể có chức năng cuộn ngang bằng Owl Carousel 2 kết hợp với query.mousewheel.js như trong this demo của trang web băng chuyền con cú. Nhưng thanh cuộn không hiển thị, nó chỉ di chuyển bằng bánh xe chuột của bạn.

Đây là mã từ liên kết giới thiệu:

<script src="path/to/jquery.min.js"></script> 
<script src="path/to/owl.carousel.js"></script> 
<script src="path/to/jquery.mousewheel.min.js"></script> 

<script> 
    $(document).ready(function() { 
     var owl = $('.owl-carousel'); 
     owl.owlCarousel({ 
      loop:true, 
      nav:true, 
      margin:10, 
      responsive:{ 
       0:{ 
        items:1 
       }, 
       600:{ 
        items:3 
       },    
       960:{ 
        items:5 
       }, 
       1200:{ 
        items:6 
       } 
      } 
     }); 
     owl.on('mousewheel', '.owl-stage', function (e) { 
      if (e.deltaY>0) { 
       owl.trigger('next.owl'); 
      } else { 
       owl.trigger('prev.owl'); 
      } 
      e.preventDefault(); 
     }); 
    }); 
</script>