0

Хочу создать кнопки кнопки назад и вперед для пейджера.Вот разметка

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

вот что должно быть в итоге введите сюда описание изображения

2 ответа 2

1

Вставьте кнопки в разметку и повесьте слушатели событий клика, обработчик которых будет использовать публичные методы bxSlider (подробнее об этих методах можно найти в документации - 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>

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

    })

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.