Несколько слайдеров на одной странице Swiper Slider
Введение
Сегодня я хочу поделиться решением, как реализовать несколько слайдеров Swiper на одной странице. Это довольно распространенная задача, когда нам нужно разместить разные галереи или карусели на одном сайте. В этой статье вы узнаете, как правильно инициализировать и настроить несколько слайдеров с разными параметрами.
Преимущества использования Swiper
Swiper - это современная и мощная библиотека для создания слайдеров. Вот почему стоит использовать её:
- Высокая производительность
- Гибкая настройка
- Поддержка мобильных устройств
- Большое количество встроенных функций
- Активное сообщество и регулярные обновления
Основные моменты реализации
Структура HTML
Для работы нескольких слайдеров на странице, каждый слайдер должен иметь уникальную структуру. Вот пример базовой разметки:
1
2
3
4
5
6
7
8
<div class="tabs-swiper">
<div class="swiper-wrapper">
<!-- Слайды -->
</div>
<div class="tabs__pag"></div>
<div class="tabs__next"></div>
<div class="tabs__prev"></div>
</div>
Ключевые особенности кода:
- Получаем все элементы слайдеров через
querySelectorAll - Создаем массив для хранения экземпляров Swiper
- Для каждого слайдера настраиваем:
- Количество видимых слайдов
- Отступы между слайдами
- Пагинацию с номерами страниц
- Кнопки навигации вперед/назад
- Адаптивность под разные разрешения экрана
Проверка инициализации
Проверка if (!sliderw.swiper) гарантирует, что слайдер будет инициализирован только один раз. Это помогает избежать дублирования при повторном вызове функции.
Реализация
Ниже представлен рабочий код, который вы можете использовать в своих проектах:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
document.addEventListener('DOMContentLoaded', () => {
const sliderswork = document.querySelectorAll('.tabs-swiper');
let workPag = document.querySelectorAll('.tabs__pag');
let navnext = document.querySelectorAll('.tabs__next');
let navprev = document.querySelectorAll('.tabs__prev');
let mySwipersW = []
function sliderinit() {
sliderswork.forEach((sliderw, index) => {
if (!sliderw.swiper) {
mySwipersW[index] = new Swiper(sliderw, {
slidesPerView: 2,
spaceBetween: 12,
pagination: {
el: workPag[index],
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
navigation: {
nextEl: navnext[index],
prevEl: navprev[index],
},
breakpoints: {
"768": {
slidesPerView: 4,
spaceBetween: 24,
},
"1276": {
slidesPerView: 4,
spaceBetween: 32,
},
},
});
}
})
}
sliderinit();
});
Настройка адаптивности
В коде реализована адаптивная верстка с тремя брейкпоинтами:
- Мобильные устройства (до 768px): 2 слайда
- Планшеты (768px - 1276px): 4 слайда
- Десктоп (от 1276px): 4 слайда с увеличенными отступами
Оптимизация производительности
Для улучшения производительности рекомендуется:
- Инициализировать слайдеры только после загрузки DOM
- Использовать делегирование событий
- Минимизировать количество перерисовок
- Правильно настраивать отступы и размеры слайдов
Заключение
Этот код позволяет эффективно управлять несколькими слайдерами на одной странице, обеспечивая гибкую настройку для каждого экземпляра. Вы можете легко адаптировать параметры под свои нужды, изменяя количество слайдов, отступы и другие настройки в конфигурации Swiper.