Слайдер Swiper

Недавно ознакомился со слайдером Swiper. По функционалу он более комплексный по сравнению с Owl.Carousel и Slick. Swiper, и, судя по рейтингам, становится всё более популярным. Будем публиковать тут интересные решения связанные с этим перспективным слайдером.

Для работы слайдера традиционно требуется подключение скрипта и стилей Swiper:

https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css
https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js

Вёрстка

<div class="swiper">
  <!-- Обязательная обёртка -->
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- Если нужна пагинация -->
  <div class="swiper-pagination"></div>

  <!-- Если нужна навигация -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Если нужен скроллбар -->
  <div class="swiper-scrollbar"></div>
</div>

Слайдеру, помимо основных стилей, потребуется прописать размер:

.swiper {
  width: 600px;
  height: 300px;
}

Инициализация

let fitness = new Swiper(".fitness-gallery-swiper", {
	slidesPerView: 1,
	loop: true,
	navigation: {
		nextEl: '.next',
		prevEl: '.prev',
	},
	pagination: {
		el: ".fitness-pagination-items",
		clickable: true,
		/*Return bullets as numbers*/
		renderBullet: function (index, className) {
			return '<p class="' + className + '">' + '<span>' + '0' + (index + 1) + '</span>' + "</p>";
		},
	},
});

Связать 2 слайдера

let restaurant = new Swiper(".rest-right-gallery", {
	// direction: 'vertical',
	slidesPerView: 1,
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: ".snp-pagination-items",
		clickable: true,
		/*Return bullets as numbers*/
		renderBullet: function (index, className) {
			return '<p class="' + className + '">' + '<span>' + '0' + (index + 1) + '</span>' + "</p>";
		},
	},
});
let restBlockItems = document.querySelectorAll('.rest-block-item');
let arrTitle = [];
restBlockItems.forEach(e => {
	let restBlockItemsAttr = JSON.parse(e.getAttribute('data-item'));
	arrTitle.push(restBlockItemsAttr.title_rest)
});

let restBlock = new Swiper(".rest-block", {
	// direction: 'vertical',
	slidesPerView: 1,
	effect: 'fade',
	loop: true,
	pagination: {
		el: ".rest-block-pagination-items",
		clickable: true,
		/*Return bullets as numbers*/
		renderBullet: function (index, className) {
			return '<p class="' + className + '">' + '<span>' + '0' + (index + 1) + '</span>' + '<span>' + arrTitle[index] + '</span>' + "</p>";
		},
	},
});

// Связать 2 слайдера
restaurant.controller.control = restBlock;
restBlock.controller.control = restaurant;

Тут же, в этом примере, показан принцип как брать для пагинации информацию из атрибутов.

Поделиться в соц. сетях: