设置HTML中的属性时,滑动滑块将类添加到活动幻灯片

时间:2019-02-20 17:42:58

标签: javascript jquery html slider swiper

我想在活动幻灯片已设置属性(例如“ navbar-dark”)时向navbar添加类。我尝试了上课,但是我的功能无法正常运行。这是当我更改幻灯片时,班级正在添加到第二张幻灯片而不是第一张幻灯片。

$(document).ready(function () {
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: false,
        mousewheel: {
            invert: false,
        },
    });
    mySwiper.on('slideChange', function (realIndex) {
        if ($('.swiper-slide.swiper-slide-active').hasClass('dark')) {
            $('#navbar').addClass('darknav')
        } else {
            $('#navbar').removeClass('darknav');
        }
    });
});

1 个答案:

答案 0 :(得分:0)

我用Google搜索了“ swiper jQuery插件”,打开了第一个建议页面,然后转到the API。 还有Events section.on init方法。试试吧

jQuery(function($) {

  function darkNav() {
    //if ( $('.swiper-slide.swiper-slide-active').hasClass('dark') ) { // `this` rather?
    if ( $(this).find('.swiper-slide-active').hasClass('dark') ) {
      $('#navbar').addClass('darknav')
    } else {
      $('#navbar').removeClass('darknav');
    }
  }

  var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
    loop: false,
    mousewheel: {
      invert: false,
    },
    on: {
      init: darkNav,          // do also on init
      slideChange: darkNav    // is this needed?
    }
  });

});

此外,您可以尝试使用$('.swiper-slide.swiper-slide-active').hasClass('dark')

来代替$(this).find('.swiper-slide-active').hasClass('dark')