我试图这么做几个小时但不能这样做。
我试图将中间幻灯片设置为活动幻灯片,但似乎它正在上下移动。
以下是代码:
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>
JS
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')
}
有人可以帮忙吗?
感谢。
答案 0 :(得分:9)
这是一个棘手的问题......至少对我而言。在尝试了许多不同的东西,并阅读了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/ 。