I want to create buttons for the back and forth buttons for the pager.

$('.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>

that's what should be the result enter image description here

    2 answers 2

    Insert buttons into the markup and hang click event listeners whose handler will use public bxSlider methods (for more information about these methods, see the documentation at http://bxslider.com/options )

     var slider = $('.bxslider').bxSlider(); $('#next').on('click', slider.goToNextSlide.bind(slider)); $('#prev').on('click', slider.goToPrevSlide.bind(slider)); 
     <div id="bx-pager"> <div id="prev"></div> <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 id="next"></div> </div> 

       var realSlider= $(".bxslider").bxSlider({ speed:1000, pager:false, nextText:'', prevText:'', mode: 'fade', captions: true, infiniteLoop:false, hideControlOnEnd:true, onSlideBefore:function($slideElement, oldIndex, newIndex){ changeRealThumb(realThumbSlider,newIndex); } }); var realThumbSlider=$("#bx-pager").bxSlider({ minSlides: 6, maxSlides: 6, slideWidth: 200, slideMargin: 12, moveSlides: 1, pager:false, speed:1000, infiniteLoop:false, hideControlOnEnd:true, nextText:'<span></span>', prevText:'<span></span>', onSlideBefore:function($slideElement, oldIndex, newIndex){ /*$j("#sliderThumbReal ul .active").removeClass("active"); $slideElement.addClass("active"); */ } }); linkRealSliders(realSlider,realThumbSlider); if($("#bx-pager a").length<5){ $("#bx-pager .bx-next").hide(); } function linkRealSliders(bigS,thumbS){ $("#bx-pager").on("click","a",function(event){ event.preventDefault(); var newIndex=$(this).parent().attr("data-slideIndex"); bigS.goToSlide(newIndex); }); } function changeRealThumb(slider,newIndex){ var $thumbS=$("#bx-pager"); $thumbS.find('.active').removeClass("active"); $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active"); if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex); else slider.goToSlide(slider.getSlideCount()-4); } })