Как добавить класс другому блоку в зависимости от слайда swiper.js?

Question

Как добавить класс другому блоку в зависимости от слайда swiper.js?

Рейтинг: 1Ответов: 1Опубликовано: 28.05.2023

Я использую для слайдера библиотеку swiper.js. Мне необходимо в зависимости от текущего слайда, добавлять класс для header, для того, чтобы текст в нем был другого цвета. Желательно решение на js.

css javascript html swiper.js slider

Источник: Stack Overflow на русском

Answer 1

▲ 2

Можно обратиться к документации Swiper.js и почитать раздел "Methods & Properties". Там обнаружим, что Swiper предоставляет возможность получить свойство слайда swiper.realIndex - "Индексный номер текущего активного слайда с учетом переупорядоченных слайдов в циклическом режиме". А из раздела "Events" узнаем о событии смены слайдов slideChange. Ниже пример, как это можно было бы использовать.

const header = document.querySelector('.header');
const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

header.classList.add(`header_style_${swiper.realIndex + 1}`); // +1 для того, чтобы не было класса типа .header_style_0. Дело вкуса.

/*Обрабатываем событие смены слайда*/
swiper.on('slideChange', function() {
  header.className = 'header'; //"Сбрасываем" стиль шапки на значение по умолчанию
  header.classList.add(`header_style_${swiper.realIndex + 1}`); //В зависимости от того, на каком по счёту слайде сейчас находимся, устанавливаем соответствующий стиль шапке
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.swiper {
  width: 100%;
  height: 150px;
}

.swiper-slide {
  color: white;
  background-color: teal;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9;
  background-color: teal;
  height: 60px;
  /*Стиль шапки по умолчанию*/
}

.first-display {
  padding-top: 70px;
}


/*Задаём несколько стилей для .header*/

.header_style_1 {
  background-color: green;
  color: black;
}

.header_style_2 {
  background-color: lime;
  color: orange;
}

.header_style_3 {
  background-color: limegreen;
  color: red;
}

.menu {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 10px;
}

.swiper-slide {
  color: inherit;
}

.menu__link {
  color: inherit;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<header class="header">
  <nav>
    <ul class="menu">
      <li class="menu__item">
        <a class="menu__link" href="#link-1">Link 1</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="#link-2">Link 2</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="#link-3">Link 3</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="#link-4">Link 4</a>
      </li>
    </ul>
  </nav>
</header>
<div class="section first-display">
  <!-- Slider main container -->
  <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide swiper-slide_1">Slide 1</div>
      <div class="swiper-slide swiper-slide_2">Slide 2</div>
      <div class="swiper-slide swiper-slide_3">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>
</div>

Как добавить класс другому блоку в зависимости от слайда swiper.js?

Ответы