Lightbox with 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 eg 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.