如何获取当前活动的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>

JavaScript:

var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });
    
$(document).ready(function() { 
      
            var currentImage = $('.swiper-slide img').attr(src);
            // console.log(var1);
            $('#crrent-image img').attr('src', currentImage);
      
    });

Answer 1

以防有人在寻找相同的答案。

我就是这样解决的：

$(".swiper-button-next").click(function() {
             var currentActiveSlide = $('.swiper-slide-active img').attr('src');

            $('#main_image img').attr('src', currentActiveSlide);
        });
 $(".swiper-button-prev").click(function() {
            var currentActiveSlide = $('.swiper-slide-active img').attr('src');

            $('#main_image img').attr('src', currentActiveSlide);
        });

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

How to get the current active swiper image src and set it in another image?

html

javascript

jquery

swiper.js