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

Answer 1

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.

Answer 2

I use css to achieve this.

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