Как сделать такие буллеты в swiper js?

Swiper JS - это библиотека JavaScript, которая предоставляет возможность создания каруселей и слайдеров на веб-страницах. Чтобы добавить буллеты (точки индикации) в Swiper JS, вам необходимо выполнить следующие шаги:

Шаг 1: Включите CSS-стили

Перед началом использования буллетов в Swiper JS вам нужно включить соответствующие CSS-стили. Для этого вы можете использовать файл стилей swiper.min.css, добавив его в раздел head вашей HTML-страницы. Вы можете загрузить этот файл с официального сайта Swiper JS или использовать другие источники, если они доступны.

<link rel="stylesheet" href="path/to/swiper.min.css">

Шаг 2: Создайте контейнер для слайдера
Чтобы использовать буллеты, вы должны создать контейнер для вашего слайдера. В этом контейнере будут расположены все слайды и буллеты. Ниже приведен пример кода HTML, который создает контейнер с идентификатором "mySwiper":

<div class="swiper-container" id="mySwiper">
  <!-- Слайды будут добавлены сюда -->
</div>

Шаг 3: Добавьте слайды

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

<div class="swiper-container" id="mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="path/to/image1.jpg" alt="Slide 1">
    </div>
    <div class="swiper-slide">
      <img src="path/to/image2.jpg" alt="Slide 2">
    </div>
    <div class="swiper-slide">
      <img src="path/to/image3.jpg" alt="Slide 3">
    </div>
    <!-- Добавьте сколько угодно слайдов -->
  </div>
</div>

Шаг 4: Инициализируйте Swiper JS с буллетами

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

var mySwiper = new Swiper('#mySwiper', {
  // Опции слайдера
  loop: true,
  slidesPerView: 1,

  // Опции буллетов
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Шаг 5: Добавьте HTML-разметку для буллетов

Теперь вам нужно добавить HTML-разметку для буллетов внутри вашей контейнера слайдера. Swiper JS будет автоматически генерировать буллеты на основе этой разметки. Ниже приведен пример кода HTML для буллетов:

<div class="swiper-container" id="mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="path/to/image1.jpg" alt="Slide 1">
    </div>
    <div class="swiper-slide">
      <img src="path/to/image2.jpg" alt="Slide 2">
    </div>
    <div class="swiper-slide">
      <img src="path/to/image3.jpg" alt="Slide 3">
    </div>
    <!-- Добавьте сколько угодно слайдов -->
  </div>

  <!-- HTML-разметка для буллетов -->
  <div class="swiper-pagination"></div>
</div>

На этом этапе вы должны иметь работающий слайдер Swiper JS с буллетами. Буллеты будут отображаться внизу слайдера, и вы сможете нажимать на них, чтобы переключаться между слайдами. По своим потребностям вы можете настроить стили буллетов и их внешний вид, используя CSS.