jQuery 在 bxslider 中,我想在当前幻灯片上添加一个类
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12745083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In bxslider i want to add a class on current slide
提问by pixel boon
I want to add an extra class to the current visible slide, i dont have so much knowledge of jquery i'm trying it by following code.
我想在当前可见的幻灯片中添加一个额外的类,我对 jquery 没有太多了解,我正在通过以下代码进行尝试。
$(document).ready(function(){
$('#slider1').bxSlider({
pager: 'true'
});
$(currentSlide).addClass('active-slide');
return false;
});
采纳答案by XMen
var slider=$('#slider1').bxSlider({
pager: 'true',
onBeforeSlide: function(currentSlide, totalSlides, currentSlideHtmlObject){
$('.pager').removeClass('active-slide');
$(currentSlideHtmlObject).addClass('active-slide');
// $('#sddf').html('<p class="check">Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.');
}
});
回答by dariodev
To add class on the first visible slide you have to call onSliderLoad. Then you continue adding and removing active-slide class with onSlideAfter call.
要在第一张可见幻灯片上添加类,您必须调用 onSliderLoad。然后您继续使用 onSlideAfter 调用添加和删除活动幻灯片类。
onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('.active-slide').removeClass('active-slide');
$('.bxslider>li').eq(currentSlideHtmlObject + 1).addClass('active-slide')
},
onSliderLoad: function () {
$('.bxslider>li').eq(1).addClass('active-slide')
},
回答by Igor Skoldin
Here it is:
这里是:
$('#slider1 ul').bxSlider({
pager: 'true',
onSliderLoad: function(currentIndex) {
$('#slider1').find('.bx-viewport').find('ul').children().eq(currentIndex + 1).addClass('active-slide');
},
onSlideBefore: function($slideElement){
$('#slider1').find('.bx-viewport').find('ul').children().removeClass('active-slide');
$slideElement.addClass('active-slide');
}
});
回答by Muhammad Shahzaib
its 100% working
它的 100% 工作
$(document).ready(function(){
$('.bxslider1').bxSlider({
slideWidth: 280,
slideMargin: 20,
useCSS: false,
autoHover: false,
speed: 2000,
oneToOneTouch: true,
pager: 'true',
onSliderLoad: function(currentIndex) {
$('.bxslider1').find('.bx-viewport').find('ul').children().eq(currentIndex + 1).addClass('active-slide');
},
onSlideBefore: function($slideElement){
$('.bxslider1').find('.bx-viewport').find('ul').children().removeClass('active-slide');
$slideElement.addClass('active-slide');
}
});
});