swiper.min.js · PHP筆記

*swiper.min.js*插件實現多種滑動效果,可在pc、手機、平板中使用 [Swiper中文網-輪播圖幻燈片js插件,H5頁面前端開發](https://www.swiper.com.cn/) http://www.swiper.com.cn/（版本3）、http://2.swiper.com.cn/（版本2.X） http://bbs.swiper.com.cn/forum.php [Swiper演示 - Swiper中文網](https://www.swiper.com.cn/demo/index.html) [Swiper插件的基本使用方法和案例\_王同學要努力的博客-CSDN博客\_swiper案例](https://blog.csdn.net/m0_46374969/article/details/118599004) ``` <div class="swiper banner"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/組 2140@3x.png" alt=""></div> <div class="swiper-slide"><img src="./img/組 2140@3x.png" alt=""></div> <div class="swiper-slide"><img src="./img/組 2140@3x.png" alt=""></div> <div class="swiper-slide"><img src="./img/組 2140@3x.png" alt=""></div> <div class="swiper-slide"><img src="./img/組 2140@3x.png" alt=""></div> </div> <div class="swiper-pagination"></div> </div> <script type="text/javascript"> var mySwiper = new Swiper('.banner', { initialSlide:0,//設定初始化時slide的索引。Swiper默認初始化時顯示第一個slide direction:"horizontal",//wiper的滑動方向，可設置為水平方向切換 horizontal 或垂直方向切換 vertical speed:300,//切換速度，即slider自動滑動開始到結束的時間（單位ms），也是觸摸滑動時釋放至貼合的時間 autoplay: true,//可選選項，自動滑動 loop:true, //是否循環 // 如果需要分頁器 pagination: { el:'.swiper-pagination', type:'fraction', }, paginationClickable :true, // 如果需要前進后退按鈕 // nextButton: '.swiper-button-next', // prevButton: '.swiper-button-prev' }) </script> ``` ``` <div class="swiper banner"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/123333@2x.png" alt=""></div> <div class="swiper-slide"><img src="./img/123333@2x.png" alt=""></div> <div class="swiper-slide"><img src="./img/123333@2x.png" alt=""></div> </div> <div class="swiper-pagination1"></div> </div> ``` ``` var mySwiper = new Swiper('.banner', { initialSlide:0,//設定初始化時slide的索引。Swiper默認初始化時顯示第一個slide direction:"horizontal",//wiper的滑動方向，可設置為水平方向切換 horizontal 或垂直方向切換 vertical breakpoints:"",//可使用斷點（breakpoints,4.5.0后）如設置不同分辨率下的切換方向也可可使用 swiper.changeDirection() 方法動態更改切換方向 speed:300,//切換速度，即slider自動滑動開始到結束的時間（單位ms），也是觸摸滑動時釋放至貼合的時間 grabCursor:false,//該選項給Swiper 使用者提供小小的貼心應用，設置為true 時，鼠標覆蓋Swiper 時指針會變成手掌形狀，拖動時指針會變成抓手形狀。（根據瀏覽器形狀有所不同） watchSlidesProgress:false,//開啟這個參數來計算每個slide的progress 當前活躍的slider值為0 setWrapperSize:false,//使用flexbox布局 virtualTranslate:false,//虛擬的位移 Slide不會移動，但是Swiper還是在運行 //width:"",//強制Swiper的寬度(px)這個參數會使自適應失效 //height:"",//強制Swiper的高度(px)這個參數會使自適應失效 roundLengths:false,//如果設置為true，則將slide的寬和高取整(四舍五入) breakpointsBase:"window",//設置斷點功能（breakpoints）的計算基準。可以設為 window 或 container autoHeight:false,//自動高度。設置為 true 時，wrapper 和container 會隨著當前slide 的高度而發生變化 uniqueNavElements:true,//當存在多個同名導航元素時，設置導航元素是否唯一。導航元素包括分頁器，按鈕和滾動條 nested:false,//true 時用于嵌套相同方向的swiper時，當切換到子swiper時停止父swiper的切換 watchOverflow:false,//當沒有足夠的slide切換時，例如只有1個slide，swiper會失效且隱藏導航等。默認不開啟這個功能loop模式無效，因為會復制slide runCallbacksOnInit:true,//如果你的初始化slide不是第一個(例initialSlide:2)或者設置了loop: true，那么初始化時會觸發一次 [Transition/SlideChange] [Start/End] 回調函 init:true,//當你創建一個Swiper實例時是否立即初始化如果禁止了，可以稍后使用 mySwiper.init() 來初始化 on:"",//注冊事件，Swiper4.0開始使用關鍵詞this指代Swiper實例 on:{slideChange:function(){}} 或者mySwiper.on('slideChange', function () {}) preloadImages:true,//默認為true，Swiper會強制加載所有圖片后才初始化 updateOnImagesReady:true,//當所有的內嵌圖像（img標簽）加載完成后Swiper會重新初始化。使用此選項需要先開啟preloadImages: true cssMode:false,//啟用后，它將使用現代CSS Scroll Snap API updateOnWindowResize:true,//默認當窗口(window) 尺寸發生變化時，比如屏幕旋轉，Swiper會更新和重新計算(update和breakpoints等) enabled:true,//設置Swiper初始時是否可用，默認是可用(true)。當Swiper被禁用時，它將隱藏所有導航元素（分頁器、按鈕、滾動條）并且不會響應任何事件和交互后面可通過函數 enable() 和 disable() 動態啟用或禁用Swiper createElements:false,//自動創建元素。啟用后，Swiper 將使用 swiper-wrapper 元素自動包裝slides，并為啟用的導航、分頁器和滾動條創建所需的元素（使用它們各自的參數對象或使用true）） rewind:false,//設置為true啟用“倒帶”模式 maxBackfaceHiddenSlides:10,//如果slide 總數小于此處指定的值，則 Swiper 將 backface-visibility: hidden 在slide 上啟用以減少 Safari 中的視覺“閃爍”。這種閃爍可能會出現在大于2000像素的Safari 中 modules:"",//在項目中引入swiper 時，需要用到的 Swiper 模塊 autoplay: true,//可選選項，自動滑動 loop:true, //是否循環 // 如果需要分頁器 pagination: { el:'.swiper-pagination1', type:'custom', renderCustom: function (swiper, current, total) { var html=""; for (var i = 1; i <= total; i++) { if(i==current){ html+='<div class="swiper-p-bullet swiper-p-active"></div>'; }else{ html+='<div class="swiper-p-bullet"></div>'; } } return html; }, }, paginationClickable :true, // 如果需要前進后退按鈕 // nextButton: '.swiper-button-next', // prevButton: '.swiper-button-prev' }) ``` 設置分頁的樣式 ``` .swiper-pagination-custom{ z-index: 2; position: absolute; text-align: center; // left: (106/@vw); // bottom: (9/@vw); } .swiper-p-bullet { width: (30/@vw); height: (3/@vw); display: inline-block; border-radius: (1.5/@vw); opacity: .12; background-color: #FFFFFF; margin: 0 (13/@vw); } .swiper-p-active{ width: (30/@vw); height: (3/@vw); display: inline-block; border-radius: (1.5/@vw); background: #04C4C9; opacity: 1; } ```