I am using Lightgallery in combination with Swiper.js. LightGallery opens once clicking on a slide from a Swiper carousel. My issue is that I am displaying multiple galleries (multiple carousels) on the same page, and my setup apparently sees all of them as one long gallery. How can I fix this? I guess I should create dynamic IDs and call them via dynamicEl, but I’m very new to javascript and have no clue how to do that.
Here’s my PHP setup within a foreach loop
<?php foreach($pages->children()->listed() as $project ): ?>
<li id="<?= $project->slug() ?>" class="card">
<div class="card-carousel-container">
<div class="swiper swiperGrid">
<ul class="swiper-wrapper">
<?php foreach($project->images()->sortBy('sort') as $image ): ?>
<li class="swiper-slide">
<a class="lightgallery-open">
<img src="<?= $image->url() ?>" data-src="<?= $image->url() ?>" alt="<?= $project->info()->text() ?>">
</a>
</li>
<?php endforeach ?>
</ul>
</div>
</div>
</li>
<?php endforeach ?>
and here’s my javascript setup:
const gsBgImgSelector = ".swiperGrid .swiper-slide img";
const dynamicEl = [...document.querySelectorAll(gsBgImgSelector)].map(
(sliderImg) => {
return {
src: sliderImg.src,
thumb: sliderImg.src,
subHtml: sliderImg.alt,
};
}
);
console.log(dynamicEl);
const dynamicGallery = document.querySelector(".swiperGrid");
const popup = lightGallery(dynamicGallery, {
plugins: [lgHash, lgVideo],
selector: '.swiper-slide:not(.swiper-slide-duplicate) > div',
dynamic: true,
loop: true,
autoplayVideoOnSlide: true,
dynamicEl,
});
console.debug(popup);
dynamicGallery.addEventListener("click", () => {
popup.openGallery(0);
});
[...document.querySelectorAll(".swiper-slide")].map((slide, idx) => {
slide.addEventListener("click", () => {
popup.openGallery(idx);
});
});
Could you please help me to solve this? Thank you very much all!