I'm using swiper js to display a slider on my home page. Currently it is set to the default slide effect and I would like to overwrite this behaviour: https://swiperjs.com/demos

What I would like to achieve is that it fades out the active image on transition to the next image, and then slide in (default effect) the next image. So, fade out current active image, slide in next one. I have tried to play around with CSS3, the fade effect parameters and callbacks but couldn't quite achieve what I wanted.

My markup looks like this:

<div class="swiper-container"
                     data-swiper='{"autoplay": {"delay": 2000, "disableOnInteraction": false}, "navigation": {"nextEl": ".next", "prevEl": ".prev"}}'>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
           <img class="image" src="/test1.png"/>
        </div>
        <div class="swiper-slide">
           <img class="image" src="/test2.png"/>
        </div>
        <div class="swiper-slide">
           <img class="image" src="/test3.png"/>
        </div>
    </div>
</div>
 

And here's my js:

  let elements = document.querySelectorAll('.swiper-container');

  import(/* webpackChunkName: "swiper" */ "swiper/swiper.min.css");
  import(/* webpackChunkName: "swiper" */ "swiper").then(
    ({default: Swiper, Autoplay, Navigation, EffectFade}) => {
      Swiper.use([Autoplay, Navigation, EffectFade]);

      elements.forEach((element) => {
        const settings = JSON.parse(element.dataset.swiper || '{}');
        let swiper = new Swiper(element, settings);

        swiper.on('slideChangeTransitionStart', () => {
            $('.swiper-slide').each(function () {
              if ($(this).index() === swiper.activeIndex) {
                // Fadein in active slide
                // slide in normally
              }
              else {
                // fade out inactive class but don't slide
                $(this).find('.image').fadeOut(300);
              }
            });
          })
        });
      });

I managed to use a callback "slideChangeTransitionStart". Does anyone know what would be the easiest way to enable/disable the default slide behaviour? Should I just overwrite the CSS or is there a cleaner way?