我正在使用 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, });
查看完整描述