Owl Carousel 2を使用してカルーセルのアイテム数に基づいてオプションを変更するにはどうすればよいですか？

Question

私は追加することができますスライドの無制限量を持つ動的コンテンツを持つプロジェクトでOwl Carousel 2を使用しています。

スライドが3つある場合や、6つのインスタンスがある場合があります。

私が望む機能は、スライドが4つ未満の場合（カルーセルが一度に4つのアイテムを表示する）、mouseDrag: falseとtouchDrag: falseのオプションを追加することです。ここで

は私のJSです：だから

$('.owl-carousel').owlCarousel({ 
    loop:false, 
    margin:20, 
    responsive : { 
     // breakpoint from 0 up 
     0: { 
      items: 1, 
      mouseDrag:true, 
      touchDrag:true 
     }, 
     // breakpoint from 480 up 
     500: { 
      items: 2, 
      mouseDrag:true, 
      touchDrag:true 
     }, 
     // breakpoint from 768 up 
     740: { 
      items: 3, 
      mouseDrag:true, 
      touchDrag:true 
     }, 
     // breakpoint from 1024 up 
     980: { 
      items: 4, 
      mouseDrag:false, 
      touchDrag:false 
     } 
    } 
}) 

、ビューポートが1024pxを超える広い場合、現在、それは関係なく、そこにどのように多くの項目のドラッグ機能を削除します。つまり、4つ以上は見えません（もしあれば）。

おかげで、 ジェイ

Answer 1

あなたは何が必要に合わせて変更することができ、この答えをご覧ください。ここ

http://stackoverflow.com/a/33252395/3794783

使用中のものとV2のために私のコードです：私はITEM_COUNTに基づいて変数の値を使用

お知らせして存在しているだけ.itemの1であれば、その後に「偽」を適用します：ループ：true_false、ナビ：true_false ..

$(function() { 
    var owl_instance = $('.sectionlist .owlcarousel'); 
    var item_count = parseInt(owl_instance.find('.item').length); 
    var true_false = 0; 
    if (item_count <=1) {true_false = false;} else {true_false = true;} 
    // 
    // control nav visiblity thumbs shown vs thumbs allowed visible 
    // see: http://stackoverflow.com/a/33252395/3794783 
    // 
    owl_instance.on('initialized.owl.carousel resized.owl.carousel', function(e) { 
     $(e.target).toggleClass('owl-nonav', e.item.count <= e.page.size); 
    }); 
    owl_instance.owlCarousel({ 
    themeClass: 'owltheme-smallnav', 
    items:3, 
    responsive:{ 
      0:{items:1,nav:true}, 
      605:{items:3}, 
      670:{items:3}, 
      1250:{items:3}, 
      1520:{items:3} 
    }, 
    //margin:0, 
    navRewind:false, // Go to first/last. 
    // ***************** 
    loop:true_false, 
    nav:true_false, 
    // backport the classes to older used ones 
    navContainerClass: 'owl-buttons', 
    dotsClass: 'owl-pagination', 
    dotClass: 'owl-page', 
    navText: [ 
    '', 
    '' 
    ], 
    autoplayHoverPause:true, //false 
    lazyLoad: true, 
    dots:true // false 
    }); 
});