Question

有这样的问题。我尝试创建自定义滑块编辑bxslider。我将类设置为活动，下一个和上一个<li>我希望通过点击.next-caption和.prev-caption li滑块执行与点击.bx-next相同的操作.bx-prev，这是扭曲的滑块。

这是我的js

$('.bxslider').bxSlider({
    minSlides: 3,
    maxSlides: 3,
    slideWidth: 350,
    slideMargin: 0,
     moveSlides: 1,
     pager: false,
     // auto: true,
     speed: 3000,
     pause: 8000,
     // autoHover: true,
     onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        console.log(currentSlideHtmlObject);
        $('.active-caption').removeClass('active-caption');
        $('.bxslider>li').eq(currentSlideHtmlObject + 4).addClass('active-caption');
        $('.prev-caption').removeClass('prev-caption');
        $('.bxslider>li').eq(currentSlideHtmlObject + 3).addClass('prev-caption');
        $('.next-caption').removeClass('next-caption');
        $('.bxslider>li').eq(currentSlideHtmlObject + 5).addClass('next-caption')
    },
    onSliderLoad: function () {
        $('.bxslider>li').eq(4).addClass('active-caption');
        $('.bxslider>li').eq(3).addClass('prev-caption');
        $('.bxslider>li').eq(5).addClass('next-caption')
   },
});

感谢您的帮助！见JsFiddle DEMO

Answer 1

可能对某人有用。

$('body').on( "click", '.next-caption', function(e){
$('.bx-next').trigger('click');
});
$('body').on( "click", '.prev-caption', function(e){
$('.bx-prev').trigger('click');
});

Answer 2

打开文件--jquery.bxslider.min.js

找到内部控制的功能和评论

r.stopAuto = function（t）{

// o.interval＆amp;＆amp; （clearInterval（o.interval），o.interval = null＆amp;＆amp; o.settings.autoControls // 1！//＆amp;＆amp; t = A（“start”）） }

bxslider将.next按钮绑定到轮播中的下一张幻灯片

2 个答案: