背景：實現上層輪播圖滑動切換，下層淡入淡出。靜態效果如下：

背景與圖片相互綁定

HTML代碼如下，CSS請自行調整。

<div class="swiper-box"><!-- 底部背景切換 --><div class="swiper-container wrap-fade swiper2"><div class="swiper-wrapper" id="swiper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div></div><!-- 輪播圖 --><div class="swiper-container wrap-swiper swiper1"><div class="swiper-wrapper" id="swiperSwrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><div class="swiper-pagination"></div></div></div>

js代碼：

var Swiper2 = new Swiper(".wrap-fade", {effect : 'fade',fade:true,paginationClickable: true,loop: true,//控制循環播放，一定要加，否則切換不同步speed:1000,});var Swiper1 = new Swiper(".wrap-swiper", {pagination: ".swiper-pagination",paginationClickable: true,loop: true,autoplay: 2000,speed:1000,resistanceRatio: 0,longSwipesRatio: 0.1,threshold: 50,autoplayDisableOnInteraction: false,touchMoveStopPropagation : false,});//輪播圖控制背景切換Swiper1.params.control = Swiper2;//需要在Swiper2初始化后，Swiper1控制Swiper2Swiper2.params.control = Swiper1;//需要在Swiper1初始化后，Swiper2控制Swiper1

總結

以上是生活随笔為你收集整理的swiper用loop不出图片_swiper实现双向控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。