Как задать активную страницу в swiper?

Для задания активной страницы в Swiper вам понадобится использовать функционал пагинации, который встроен в библиотеку.

Swiper предоставляет несколько способов создания пагинации, но самый простой способ - использовать встроенный класс-модификатор "swiper-pagination-bullet-active", который Swiper автоматически добавит к активной странице.

Вот пример кода, показывающий, как задать активную страницу в Swiper с использованием Vue.js:

<template>
  <div class="swiper-container">
    <!-- Основной контент слайдера -->
    <div class="swiper-wrapper">
      <div class="swiper-slide">Слайд 1</div>
      <div class="swiper-slide">Слайд 2</div>
      <div class="swiper-slide">Слайд 3</div>
      <!-- Добавьте дополнительные слайды по необходимости -->
    </div>

    <!-- Пагинация слайдера -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
  mounted() {
    // Инициализация Swiper
    const swiper = new Swiper('.swiper-container', {
      // Параметры слайдера, если необходимо
      pagination: {
        el: '.swiper-pagination',
      },
    });

    // Обновление активной страницы слайдера при изменении слайда
    swiper.on('slideChange', () => {
      const activeIndex = swiper.activeIndex;
      const paginationBullets = document.querySelectorAll('.swiper-pagination-bullet');

      // Удаление класса-модификатора со всех пагинационных буллетов
      paginationBullets.forEach((bullet) => {
        bullet.classList.remove('swiper-pagination-bullet-active');
      });

      // Добавление класса-модификатора к активной странице
      paginationBullets[activeIndex].classList.add('swiper-pagination-bullet-active');
    });
  },
};
</script>

<style scoped>
.swiper-pagination-bullet {
  /* Стили неактивных пагинационных буллетов */
}

.swiper-pagination-bullet-active {
  /* Стили активного пагинационного буллета */
}
</style>

В этом примере мы используем Swiper с пагинацией и создаем 3 слайда внутри .swiper-wrapper. Затем мы инициализируем Swiper внутри хука mounted и добавляем слушатель события slideChange, который вызывается каждый раз, когда слайдер меняет свой слайд.

В обработчике события мы получаем индекс активного слайда через свойство activeIndex, а затем обновляем активный пагинационный буллет, удаляя класс-модификатор "swiper-pagination-bullet-active" со всех пагинационных буллетов и добавляя его к активной странице.

Важно отметить, что в примере использован модуль Swiper, который должен быть установлен и импортирован перед использованием. Вы можете установить Swiper с помощью npm, добавив его в свой проект:

npm install swiper

Также в примере предложены стили для настройки внешнего вида пагинационных буллетов. Вы можете настроить это как вам удобно, чтобы визуально указать активную страницу.