Lightbox with Swiper JS - swiper.js

Question

I'm building a page where I'm using ACF Flexible Content to add a Swiper Slider.
Slider is built so far, but now I want to have a lightbox function in the slider.
For this I have the approach to duplicate the slider once (with one slide per view, instead of three slides per view). So far so good:
Now I want to click on e.g. a zoom icon on the second slider to get to the slide that was clicked on.
For this I have an ActiveIndex function, but I don't know exactly how to give the second slider the index of the first slider...
I have sketched this roughly in a pen:
https://codepen.io/webkonditorei/pen/JjLjRQW?fbclid=IwAR2NZWpzx30gqVWVDPdOkRVrTdMC637dLNPYvakUruFYOjr6auYaJw6L9tY
Or here the code:
<link
rel="stylesheet"
href="https://unpkg.com/swiper#8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide"><p onclick="umswipen()">Slide 1</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 2</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 3</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 4</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 5</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 6</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 7</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 8</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 9</p></div>
<div class="swiper-slide"><p onclick="umswipen()">Slide 10</p></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination1"></div>
<div class="swiper-button-prev swiper-button-prev1"></div>
<div class="swiper-button-next swiper-button-next1"></div>
</div>
<!-- Swiper -->
<div class="swiper-container swiper2">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination2"></div>
</div>
<style>
body {
max-width: 1000px;
overflow: hidden;
margin: 0px auto;
}
.swiper-container {
width: 100%;
}
.swiper-slide {
text-align: center;
padding: 50px;
background: #f4f4f4;
margin-top: 25px;
}
.sliderContainer {
max-width: 500px;
}
.swiper-button-prev, .swiper-button-next {
position: absolute;
}
p {
cursor: pointer;
}
</style>
<script>
<!-- Initialize Swiper -->
var swiper1 = new Swiper('.swiper1', {
slidesPerView: 3,
spaceBetween: 10,
pagination: '.swiper-pagination1',
paginationClickable: true,
navigation: {
nextEl: '.swiper-button-next1',
prevEl: '.swiper-button-prev1',
},
});
var swiper2 = new Swiper('.swiper2', {
slidesPerView: 1,
spaceBetween: 10,
pagination: '.swiper-pagination2',
paginationClickable: true,
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
},
});
<!-- Get SlideIndex -->
function geSlideDataIndex(mainSlider){
var mainSlider = document.querySelector('swiper1');
var activeIndex = mainSlider.activeIndex;
var slidesLen = mainSlider.slides.length;
if(mainSlider.params.loop){
switch(mainSlider.activeIndex){
case 0:
activeIndex = slidesLen-3;
break;
case slidesLen-1:
activeIndex = 0;
break;
default:
--activeIndex;
}
}
return activeIndex;
}
<!-- Scroll Second Slider to current Slide of first Slider on Click -->
function umswipen(activeIndex) {
swiper2.slideTo(activeIndex);
}
</script>
Here the second slider (which should be the lightbox) is of course visible, which it really should not be, but is just about the basic function
Ideas for an approach? 🙂

Answer 1

I think you are looking for some think lake: LightGallery.
This package can help you.