问配有Swiper JS的Lightbox

EN

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