Swiper Slider Add Class To Active Slide When Attribute In HTML Is Set

I want to add class to navbar when active slide has got attribute set for example 'navbar-dark'. I tried with class but my function doesn't work perfect. It is when I changed slide

Solution 1:

I googled for "swiper jQuery plugin", opened the first suggested page and went to the API. And there's the Events section, and there's the .on init method. Let's try it

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?
    }
  });

});

Also, instead of $('.swiper-slide.swiper-slide-active').hasClass('dark') you could rather try with $(this).find('.swiper-slide-active').hasClass('dark')