Scrolling thumbnails Bxslider

1
votes

I want to create a button, the button back and forth to the pager. That markup

    $('.bxslider').bxSlider({
          pagerCustom: '#bx-pager'
    });
    <ul class="bxslider">
      <li><img src="/images/one.jpg" /></li>
      <li><img src="/images/two.jpg" /></li>
      <li><img src="/images/tree.jpg" /></li>
    </ul>


    <div id="bx-pager">
      <a data-slide-index="0" href=""><img src="/images/thumbs/one.jpg" /></a>
      <a data-slide-index="1" href=""><img src="/images/thumbs/two.jpg" /></a>
      <a data-slide-index="2" href=""><img src="/images/thumbs/tree.jpg" /></a>
    </div>

these should be the result

enter image description here

1
javascriptjqueryhtmlcssbxslider

1 Answers

0
votes

I have the same case. Here is my fast solution.

Just initialize a new BxSlider Carousel for the pager items:

$("#bx-pager").bxSlider({
    slideWidth: 275,
    minSlides: 3,
    maxSlides: 3,
    slideMargin: 0,
    controls: true,
    pager: false,
    infiniteLoop: false,
    prevText: "",
    nextText: ""
});

You can modify all the options according to your slider specifications.