मैं स्वाइपर जेएस का उपयोग कर रहा हूं और मैं वर्तमान सक्रिय स्वाइपर छवि के स्रोत का स्रोत प्राप्त करने की कोशिश कर रहा हूं और इसे एक छवि स्रोत पर सेट कर रहा हूं जो स्वाइपर से संबंधित नहीं है, ताकि जब भी मैं अगले या पिछले बटन पर क्लिक करूं तो यह प्रस्तुत करता है स्वाइपर करंट एक्टिव इमेज के समान।

Jsfiddle में कोड:

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

एचटीएमएल कोड:

<!--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,
    });
    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);
      
    });
0
Fateh Alrabeai 28 सितंबर 2020, 21:33

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);
        });
0
Developer 28 सितंबर 2020, 22:49