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

【问题标题】：bxslider bind .next button to next slide in carouselbxslider 将 .next 按钮绑定到轮播中的下一张幻灯片
【发布时间】：2014-08-10 13:37:50
【问题描述】：

有这样的问题。我尝试创建自定义滑块编辑 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

【问题讨论】：

您的代码看起来我们工作正常。有什么问题？？？
我想通过点击.next-caption 和.prev-caption li 滑动轮播 :)
你的意思是你会在左边显示3个项目n点击你会向左滑动？？
@Harsh 是的，你说的很对 :)

标签： javascript jquery css carousel bxslider

【解决方案1】：

可能对某人有用。

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

【讨论】：

【解决方案2】：

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

查找功能并评论内部控制

r.stopAuto = 函数 (t) {

//o.interval && (clearInterval (o.interval), o.interval = null && o.settings.autoControls // 1! // && t = A ("start")) }

【讨论】：