Hide Pager if bxslider has only 1 slide

Question

I'm trying to add a class "disabled" to the pager if the slider has only 1 slide showing, and nothing to actually slide.

I'm sliding a div, not a list.

It's just a basic div:

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

Here is the jquery for the slider:

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

I would like to not show the pager if there is only 1 slide showing.

Thanks for any help!

Justin

score 19 · Answer 1 · answered Jul 10 '13 at 14:49

19

I faced the same trouble and here is my solution: we should count how many child elements we have under .bxslider2 block

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

and if there is only one, then set option to 'false', otherwise to 'true'.

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

Hope it will helps.

answered Jul 10 '13 at 14:49

Arkady

387
1
2
11

not the best solution (and standard it would be '.bxslider > li'), but it does the trick, thanks – Ruben Mar 12 '14 at 13:26
I used this to disable auto scrolling when there is only 1 slide – Ruben Mar 12 '14 at 13:26
this wont work, if you have multiple slider elements on the same page and all of them are created by the same selector. given three bxslider $('.bxslider').bxSlider();. The first two have 5 elements, the third only 3. then $(".bxslider>.item").length will return the total count of 13 elements. – Jøran Jan 23 '15 at 09:33

score 5 · Answer 2 · answered Dec 21 '15 at 09:45

5

I use css to achieve this.

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

answered Dec 21 '15 at 09:45

matthewjrallen

85
2
7

score 1 · Answer 3 · answered Aug 17 '16 at 18:43

Here is a solution if you have more than one bxslider on the page.

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

Goes through each slider and finds if it has only one li. If so, add pager: false to the object passed to bxSlider.

score 0 · Answer 4 · answered Sep 10 '14 at 12:39

a nice way to solve this thing is to reload the object like that and change the controls per number of the items :

    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;

score 0 · Answer 5 · answered Mar 18 '15 at 18:41

0

Try this it works for me!!

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);
});

answered Mar 18 '15 at 18:41

Rakesh Vadnal

975
1
10
22

Hide Pager if bxslider has only 1 slide

5 Answers5