溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關使用swiper怎么實現一個異形輪播效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
container：指容器（swiper的容器里面包括滑動快（slide）的集合（wrapper）、分頁器（pagination）、前進按鈕等）
wrapper：指包含（觸控的對象，可觸摸區域，移動的塊的集合，過渡時會隨slide切換產生位移）
slider：指滑塊（切換的塊中的一個，可以包含文字、圖片、html元素或另外一個swiper
pagination：指分頁器（指示slide的數量和當前活動的slide）
active：指活動的，激活的（可視的（visible）slide是活動的，當可視slide不止一個時，默認最左邊那個活動的）
4.詳細參數配置參照swiper配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css" rel="external nofollow" > <script> //屏幕適應 --移動端 (function (win, doc) { if (!win.addEventListener) return; var html = document.documentElement; function setFont() { var html = document.documentElement; var k = 640; html.style.fontSize = html.clientWidth / k * 100 + "px"; } setFont(); setTimeout(function () { setFont(); }, 300); doc.addEventListener('DOMContentLoaded', setFont, false); win.addEventListener('resize', setFont, false); win.addEventListener('load', setFont, false); })(window, document); </script> <style> .swiper-container{width:4.14rem;height:4.88rem;margin:0 auto;position:relative;} .swiper-container img{display:block;width:2.51rem;height:4.41rem;margin:0 auto;} .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:0;left:0;width:100%;} .swiper-pagination-bullet-active {background-color:#ffd200;} </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="ossweb-img/s-img1.png"> </div> <div class="swiper-slide"> <img src="ossweb-img/s-img2.png"> </div> <div class="swiper-slide"> <img src="ossweb-img/s-img3.png"> </div> <div class="swiper-slide"> <img src="ossweb-img/s-img4.png"> </div> <div class="swiper-slide"> <img src="ossweb-img/s-img5.png"> </div> </div> <div class="swiper-pagination"></div> </div> <!-- 輪播圖 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script> <script> // 輪播圖 // 初始化swiper var mySwiper2 = new Swiper('.swiper-container', { autoplay:2000,//自動滑動 speed:500,//自動滑動開始到結束的時間（單位ms） loop:true,//開啟循環 loopedSlides:5,//在loop模式下使用slidesPerview:'auto',還需使用該參數設置所要用到的loop個數。 slidesPerView:'auto',//設置slider容器能夠同時顯示的slides數量(carousel模式)。另外，支持'auto'值，會根據容器container的寬度調整slides數目。 effect:'coverflow',//可以實現3D效果的輪播, pagination:'.swiper-pagination',//分頁器 centeredSlides:true,//設定為true時，active slide會居中，而不是默認狀態下的居左。 coverflow:{ rotate:0,//slide做3d旋轉時Y軸的旋轉角度。默認50。 stretch:100,//每個slide之間的拉伸值，越大slide靠得越緊。 默認0。 depth:150,//slide的位置深度。值越大z軸距離越遠，看起來越小。 默認100。 modifier:1,//depth和rotate和stretch的倍率，相當于depth*modifier、rotate*modifier、stretch*modifier，值越大這三個參數的效果越明顯。默認1。 slideShadows:false,//開啟slide陰影。默認 true。 }, }); // rotate :number, //側轉角度（正值凹陷）、（負值凸出） // stretch : number, //每個slide之間拉伸值（正值緊貼）、（負值遠離） // depth : number, // 正值越大slide為遠景圖（可負值） // modifier : number, //depth和rotate和stretch的倍率，值越大這三個參數的效果越明顯 // shadows : true //是否使用陰影 </script> </body> </html>
看完上述內容，你們對使用swiper怎么實現一個異形輪播效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
