Owl Carousel 2를 사용하여 회전식 천막의 항목 수를 기준으로 옵션을 변경하는 방법은 무엇입니까?

Question

추가 할 수있는 슬라이드를 무제한으로 제공하는 동적 콘텐츠가있는 프로젝트에서 Owl Carousel 2를 사용하고 있습니다.

따라서 슬라이드가 세 개인 경우 또는 인스턴스가 6 개인 인스턴스가있을 수 있습니다.

내가 원하는 기능은 슬라이드가 4 개 미만인 경우 (캐 러셀이 한 번에 4 개의 항목을 표시 함) mouseDrag: false 및 touchDrag: false 옵션을 추가하는 것입니다.

$('.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 이상 넓은 현재 때, 그것은 얼마나 많은 항목이 상관없이 드래그 기능을 제거합니다

여기 내 JS입니다. 어떤 의미인지는 4 이상은 볼 수 없다는 뜻입니다.

감사합니다, 제이

Answer 1

당신은 당신이 필요에 맞게 변경할 수있는이 답변을 참조하시기 바랍니다. 단지 .item의 1이 존재하는 경우 나는 ITEM_COUNT에 따라 변수 값을 사용하고

공지 사항, 다음에 "false"로 적용 : 여기

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

사용에서 그와 V2 내 코드입니다 : 루프 : 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 
    }); 
});