带刀刀JS的灯箱

Question

我正在构建一个页面，其中我使用ACF灵活的内容添加了swiper滑块。 Slider已经构建到迄今为止，但是现在我想在滑块中具有一个Lightbox功能。 为此，我有一个方法可以重复一次滑块（每个视图一个幻灯片，而不是每个视图的三个幻灯片）。到目前为止，一切都很好： 现在，我想单击第二个滑块上的缩放图标，以进入单击的幻灯片。 为此，我有一个ActiveIndex函数，但是我不知道如何将第二个滑块的索引提供第一个滑块的索引...

我已经用笔大致绘制了这一点：

io/webkonditorei /

<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>

当然，哪个应该是可见的，它确实不应该是，而是关于

方法的基本函数想法？

Answer 1

我认为您正在寻找一些想湖： lightgallery 。
这个包装可以帮助您。