Слайдер Swiper добавляет класс к активному слайду, когда установлен атрибут в HTML - PullRequest
Новая
       42

Слайдер Swiper добавляет класс к активному слайду, когда установлен атрибут в HTML

0 голосов
/ 20 февраля 2019

Я хочу добавить класс в панель навигации, когда для активного слайда установлен атрибут, например "navbar-dark".Я пытался с классом, но моя функция не работает идеально.Когда я менял слайд, класс добавлял второй слайд, а не первый. 

$(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 голосов
/ 20 февраля 2019

Я гуглил «swiper jQuery plugin», открыл первую предложенную страницу и перешел на API .И есть раздел Events , и есть метод .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')

...