Как подружить lightGallery + swiper loop?

Question

[Александр Кузнецов]

Добрый день.
Есть слайдер Swiper с параметром loop: true; в каждом слайде находятся изображения и создают галерею с помощью lightGallery. Однако Swiper создает дубликаты, при создании цикла, и эти дубли попадают в галерею.
Можно ли как то сделать, корректное отображение галереи?

lightgalleryjs.com
swiperjs.com

Answer 1

[Александр Кузнецов]

В общем то сам придумал как решить задачку. Опишу, может пригодится кому-то.

Нужно использовать параметр dynamic: true, в lightgalleryjs. ( https://www.lightgalleryjs.com/demos/dynamic-mode/ )

ШАГ 1. Ищем все наши изображения внутри слайдера и записываем их url в массив с объектами.

let itemGallery = document.getElementById('product-tab-gallery');
	let itemGalleryImages = itemGallery.getElementsByTagName('img');
	let realIndexSlider;
	let itemGalleryDynamic = [];
	for (let i = 0; i < itemGalleryImages.length; i++) {
		const img = itemGalleryImages[i];
		itemGalleryDynamic[i] = {
			src: img.getAttribute('src'),
			thumb: img.getAttribute('src'),
		};
	}

ШАГ 2. Инициализируем lightgalleryjs и передаем в параметр dynamicEl - массив с объектами из найденных изображений: dynamicEl: itemGalleryDynamic,

let itemGalleryLight = lightGallery(itemGallery, {
		dynamic: true,
		autoplayFirstVideo: false,
		pager: false,
		galleryId: "nature",
		plugins: [lgZoom, lgThumbnail, lgAutoplay, lgVideo, lgFullscreen, lgHash],
		mobileSettings: {
			controls: true,
			showCloseIcon: true,
			download: true,
			rotate: false
		},
		dynamicEl: itemGalleryDynamic,
	});

ШАГ 3. Инициализируем SWIPER.

let imgSlider = new Swiper('#product-tab-gallery', {
		speed: 800,
		spaceBetween: 30,
		watchOverflow: true,
		autoHeight: true,
		loop: true,
	});

ШАГ 4. Вешаем событие при клике на контейнер галереи. Ищем активный слайд по классу (swiper-slide-active), и в этом активной слайде узнаем атрибут [data-swiper-slide-index]. Этот индекс передаем методу lightgalleryjs.

itemGallery.addEventListener('click', function (e) {
		realIndexSlider = itemGallery.getElementsByClassName('swiper-slide-active');
		realIndexSlider = Number(realIndexSlider[0].getAttribute('data-swiper-slide-index'));
		console.log(realIndexSlider);
		itemGalleryLight.openGallery(realIndexSlider);
	});

Всё целиком будет выглядеть так:
HTML

<div id="product-tab-gallery" class="swiper-container">

	<div class="static-thumbnails swiper-wrapper">
		<a data-src="img/images/choose/01.jpg" class="imageitem swiper-slide">
			<img src="img/images/choose/01.jpg" />
		</a>

		<a data-src="img/images/choose/02.jpg" class="imageitem swiper-slide">
			<img src="img/images/choose/02.jpg" />
		</a>

	</div>
</div>

JS

let itemGallery = document.getElementById('product-tab-gallery');
	let itemGalleryImages = itemGallery.getElementsByTagName('img');
	let realIndexSlider;
	let itemGalleryDynamic = [];
	for (let i = 0; i < itemGalleryImages.length; i++) {
		const img = itemGalleryImages[i];
		itemGalleryDynamic[i] = {
			src: img.getAttribute('src'),
			thumb: img.getAttribute('src'),
		};
	}


	let itemGalleryLight = lightGallery(itemGallery, {
		dynamic: true,
		autoplayFirstVideo: false,
		pager: false,
		galleryId: "nature",
		plugins: [lgZoom, lgThumbnail, lgAutoplay, lgVideo, lgFullscreen, lgHash],
		mobileSettings: {
			controls: true,
			showCloseIcon: true,
			download: true,
			rotate: false
		},
		dynamicEl: itemGalleryDynamic,
	});

	let imgSlider = new Swiper('#product-tab-gallery', {
		speed: 800,
		spaceBetween: 30,
		watchOverflow: true,
		autoHeight: true,
		loop: true,
	});

	itemGallery.addEventListener('click', function (e) {
		realIndexSlider = itemGallery.getElementsByClassName('swiper-slide-active');
		realIndexSlider = Number(realIndexSlider[0].getAttribute('data-swiper-slide-index'));
		itemGalleryLight.openGallery(realIndexSlider);
	});

Наверняка код можно как-то сократить и оптимизировать, но главное что и так работает)