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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:58:36  来源:igfitidea点击:

In bxslider i want to add a class on current slide

jquerysliderbxslider

提问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

http://bxslider.com/options

http://bxslider.com/options

    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')
},

https://jsfiddle.net/dariodev/587pqsct/

https://jsfiddle.net/dariodev/587pqsct/

回答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');
    }
});

JSFiddle

JSFiddle

回答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');
                }
            });

        });