Как получить текущий слайд в Swiper?

Question

Нужно получить текущий слайд, чтобы задать ему кастомный класс.

var mySlider = new Swiper(".mySlider", {
  slidesPerView: 5,
  navigation: {
    nextEl: ".mySlider-next",
    prevEl: ".mySlider-prev",
  },
  on: {
    slideChange: function (swiper) {
      var card = document.querySelectorAll('.doc-card');
      card.forEach(item => {
        item.classList.toggle('is-flipped');
      });
    }
  },
  loop: true,
});

У меня в каждом слайде лежит div с классом doc-card на который навешена анимация. Мне нужно, чтобы при активном слайде к doc-card добавлялся кастомный класс с анимацией, а при смене активного слайда исчезал и добавлялся опять на активный Но с текущим кодом он работает через один, при изменении слайда, а мне нужно, чтобы каждый раз при смене активного слайда

Answer 1

Судя по вашему вопросу можно попробовать сделать следующее:

on: {
  slideChange: function (swiper) {
    // используется параметр loop true (см. https://swiperjs.com/swiper-api#prop-swiper-realIndex)
    let activeIndex = swiper.realIndex
    let cards = document.querySelectorAll('.doc-card');
    cards.forEach((item, index) => {
      if (index === activeIndex) {
        item.classList.add('is-flipped');
      } else {
        item.classList.remove('is-flipped')
      }
    });
  }
},

А ваш код работал через раз потому что он ко всем слайдам добавлял класс is-flipped затем убирал у всех, так как используется toggle

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head>
<body>

<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

.swiper-slide {
    min-height: 200px;
    background-color: lightseagreen;
}

.custom-class {
    background-color: red;
}

$(function () {
    new Swiper('.swiper', {
        speed: 400,
        spaceBetween: 16,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    }).on('slideChange', function () {
        setTimeout(() => {
            $('.swiper-slide').removeClass('custom-class');
            $('.swiper-slide-active').addClass('custom-class');
        })
    });

    $('.swiper-slide-active').addClass('custom-class');
});

Посмотри события swiper может что то лучше сделаешь под свою конкретную ситуацию Пример

БЛОГ НА HUSL

Как получить текущий слайд в Swiper?

Ответы (2 шт):