如何获取当前活动的swiper image src并将其设置在另一个图像中？

Question

我正在使用 swiper js，我正在尝试获取当前活动的 swiper 图像的 src 的 src 并将其设置为与 swiper 无关的图像 src，这样每当我单击下一个或上一个按钮时它就会呈现与滑动器当前活动图像相同。

jsfiddle中的代码：

https://jsfiddle.net/fateh_alrabeai/yrtvogbn/35/

HTML 代码：

<!--The image I want to be set it's soursce from the current active swiper image-->

<div class="crrent-image" id="crrent-image" style="text-align:center;">

  <img src="https://picsum.photos/200" id="currentImage" alt="">

</div>

<!--swiper code -->

  <div class="swiper-container gallery-top" style="margin-top:15px;">

    <div class="swiper-wrapper">

      <div class="swiper-slide" >

         <img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="">

      </div>

      

      <div class="swiper-slide" >

        <img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="">

      </div>

      <div class="swiper-slide" >

        <img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="">

      </div>

      <div class="swiper-slide" >

         <img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="">

      </div>

   

      

    </div>

    <!-- Add Arrows -->

    <div class="swiper-button-next swiper-button-white"></div>

    <div class="swiper-button-prev swiper-button-white"></div>

  </div>

  

  <div class="swiper-container gallery-thumbs">

    <div class="swiper-wrapper">

      <div class="swiper-slide" >

        <img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="">

      </div>

      <div class="swiper-slide">

        <img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="">

      </div>

      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)"></div>

      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)"></div>

  

  </div>

  

脚本：

var galleryThumbs = new Swiper('.gallery-thumbs', {

      spaceBetween: 10,

      slidesPerView: 4,

      freeMode: true,

      watchSlidesVisibility: true,

      watchSlidesProgress: true,

    });

Answer 1

以防有人在寻找相同的答案。这就是我解决它的方法：$(".swiper-button-next").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var currentActiveSlide = $('.swiper-slide-active img').attr('src');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#main_image img').attr('src', currentActiveSlide);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;$(".swiper-button-prev").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var currentActiveSlide = $('.swiper-slide-active img').attr('src');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#main_image img').attr('src', currentActiveSlide);&nbsp; &nbsp; &nbsp; &nbsp; });