bxslider 将中间幻灯片设置为活动幻灯片答案

【问题标题】：Bxslider set middle slide as active slidebxslider 将中间幻灯片设置为活动幻灯片
【发布时间】：2018-07-06 10:19:52
【问题描述】：

我从几个小时以来一直在尝试这样做，但无法做到。

我一直在尝试将中间幻灯片设置为活动幻灯片，但它似乎在上下移动。

代码如下：

HTML

<div class="slider8">
  <div class="slide"><a href="#">Sell My</a></div>
  <div class="slide"><a href="#">Fix My</a></div>
  <div class="slide"><a href="#">Buy A</a></div>
</div>

var slider = $('.slider8').bxSlider({
    mode: 'vertical',
    slideWidth: 300,
    minSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    console.log(currentSlideHtmlObject);
    $('.active-slide').removeClass('active-slide');
    $('.slider8>div:not(.bx-clone)').eq(currentSlideHtmlObject + 1).addClass('active-slide')
},
onSliderLoad: function () {
    $('.slider8>div:not(.bx-clone)').eq(1).addClass('active-slide')
}

http://jsfiddle.net/LU5vA/14/

有人可以帮忙吗？

谢谢。

【问题讨论】：

标签： jquery slide bxslider

【解决方案1】：

这是一个棘手的问题……至少对我来说。在尝试了许多不同的事情并阅读了 BxSlider 文档之后，我终于让它工作了。

这是我使用的代码：

var slider = $('.slider8').bxSlider({
    mode: 'vertical',
    slideWidth: 300,
    minSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    onSliderLoad: function () {
        $('.slider8>div:not(.bx-clone)').eq(1).addClass('active-slide');
    },
    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
        $('.slide').removeClass('active-slide');
        $($slideElement).next().addClass('active-slide');        
    }
});

这是您的小提琴的修改版本，其中包含工作版本：http://jsfiddle.net/LU5vA/22/ .

【讨论】：

谢谢安迪！是的，这对我来说也是一个棘手的问题。我自己花了几个小时，最后把它贴在这里。