Блог

Я использую swiper js и пытаюсь получить src src текущего активного изображения swiper и установить для него значение src изображения, которое не связано с swiper, так что всякий раз, когда я нажимаю на следующую или предыдущую кнопки, он отображает то же самое, что и текущее активное изображение swiper.

Код в 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);
      
    });
  

На случай, если кто-то искал тот же ответ.

Вот как я это решил :

 $(".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);
        });