Ẩn Máy nhắn tin nếu bxslider chỉ có 1 slide

Question

Tôi đang cố gắng thêm một lớp "đã tắt" vào máy nhắn tin nếu thanh trượt chỉ có 1 trang trình chiếu và không có gì để trượt thực sự.

Tôi đang trượt một div chứ không phải danh sách.

Nó chỉ là một div cơ bản:

<div class="bxslider2"> 
    <div class="wrap"> 
     ... 
    </div> 
</div> 

Đây là jquery cho thanh trượt:

$('.bxslider2').bxSlider({ 
    mode: 'horizontal', 
    speed: '180', 
    pagerType:'full', 
    pager:'true', 
    captions: false 
}); 

Tôi muốn không hiển thị các máy nhắn tin nếu chỉ có 1 trang trình bày hiển thị.

Cảm ơn bạn đã trợ giúp!

Justin

Answer 1

tôi phải đối mặt với những rắc rối tương tự và đây là giải pháp của tôi: chúng ta nên đếm có bao nhiêu phần tử con chúng tôi có theo khối .bxslider2

$(".bxslider2>.wrap").length 

và nếu chỉ có một, sau đó thiết lập tùy chọn thành 'false', ngược lại là 'true'.

$('.bxslider2').bxSlider({ 
    mode: 'horizontal', 
    speed: '180', 
    pagerType:'full', 
    pager: ($(".bxslider2>.wrap").length > 1) ? true: false, 
    captions: false 
}); 

Hy vọng điều đó sẽ hữu ích.

Answer 2

một cách tốt đẹp để giải quyết điều này là để tải lại các đối tượng như đó và thay đổi các điều khiển trên số các mục:

var slideQty = $('.bxslider').bxSlider({ 
     minSlides: 1, 
     maxSlides: 3, 
     slideWidth: 110, 
     slideMargin: 0, 
     adaptiveHeight: true, 
     pager: false, 
     moveSlides: 1, 
     onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); } 

    }); 



    var count = slideQty.getSlideCount(); 
    if (count < 7) { 
     slideQty.reloadSlider({ 
      controls : false, 
      minSlides: 1, 
      maxSlides: 3, 
      slideWidth: 110, 
      slideMargin: 0, 
      adaptiveHeight: true, 
      pager: false, 
      moveSlides: 1, 
      onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); } 
     }); 
    } 

    return false; 

Answer 3

Hãy thử điều này nó làm việc cho tôi !!

var slider = $('#slider').bxSlider(); 

$('.bx-next, .bx-prev, .bx-pager a').click(function(){ 
    // time to wait (in ms) 
    var wait = 1000; 
    setTimeout(function(){ 
    slider.startAuto(); 
    }, wait); 
}); 

Answer 4

Tôi sử dụng css để đạt được điều này.

.bx-pager-item:first-of-type:last-of-type { 
    display: none 
} 

Answer 5

Đây là giải pháp nếu bạn có nhiều hơn một bxslider trên trang.

$('.bxslider').each(function() { 
     var options = { 
     mode: 'fade', 
     }; 
     if ($(this).find('li').length === 1) { 
     options.pager = false; 
     } 
     $(this).bxSlider(options); 
    }); 

Đi qua từng thanh trượt và tìm xem nó có chỉ một li không. Nếu vậy, hãy thêm pager: false vào đối tượng được chuyển đến bxSlider.