輪播效果:app
ide
<div class="swiper-container successful_swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="./images/mallPlatform/Choice_img1.jpg" alt=""> </div> <div class="swiper-slide"> <img src="./images/mallPlatform/Choice_img2.jpg" alt=""> </div> <div class="swiper-slide"> <img src="./images/mallPlatform/Choice_img3.jpg" alt=""> </div> </div> </div> <div class="pagination successful_pagination"></div>
JS:oop
new Swiper('.successful_swiper', {
autoplay: {
disableOnInteraction: false, // 鼠標滑動後繼續自動播放
delay: 4000, //4秒切換一次 }, speed: 1000, //切換過渡速度 effect: 'coverflow', loop: true, slidesPerView: "auto", centeredSlides: true, //設置slide居中 // spaceBetween: 10, coverflowEffect: { rotate: 0, //slide作3d旋轉時Y軸的旋轉角度。默認50。 stretch: -30, //每一個slide之間的拉伸值(距離),越大slide靠得越緊。 默認0。 depth: 100, //slide的位置深度。值越大z軸距離越遠,看起來越小。 默認100。 modifier: 1, //depth和rotate和stretch的倍率,至關於 depth*modifier、rotate*modifier、stretch*modifier,值越大這三個參數的效果越明顯。默認1。 slideShadows: false //開啓slide陰影。默認 true。 }, pagination: { el: '.successful_pagination', clickable: true, }, });