# **effect** ``` slide的切換效果，默認為"slide"（位移切換），可設置為'slide'（普通切換、默認）, "fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉）。 ``` **"fade"** \*\*\*\* **"cube"** :-: \*\*\*\* ***** **"coverflow"** :-: \*\*\*\* ***** "flip" :-:  :-: ``` // 切換效果 effect : 'fade', ``` ``` var mySwiper = new Swiper('#swiper-container1',{ effect : 'fade', }) var mySwiper2 = new Swiper('#swiper-container2',{ effect : 'cube', }) var mySwiper3 = new Swiper('#swiper-container3',{ effect : 'coverflow', slidesPerView: 3, centeredSlides: true, }) var mySwiper4 = new Swiper('#swiper-container4',{ effect : 'flip', }) ``` ``` <script> window.onload = function(){ var swiper = new Swiper('.swiper-container'，{ // 切換效果 effect : 'fade', //開啟了這個選項，現在鍵盤上的 可以控制Swiper keyboard: true, //等同于以下配置 /* keyboard: { enabled: true,// 開啟后可以使用鍵盤切換 onlyInViewport: true, //true為在當前窗口,false為不在當前窗口 //默認僅控制當前窗口內的swiper切換。當swiper離開可視區域則無法切換。 //禁止后，即使swiper不在可視區域也能鍵盤控制切換 },*/ //無縫輪播 loop:true, autoplay:true,//等同于以下設置 /*autoplay: { delay: 3000, //動畫播放的間隔時間 stopOnLastSlide: false,//如果設置為true，當切換到最后一個slide時停止自動切換。（loop模式下無效） disableOnInteraction: true, /*用戶操作swiper之后，是否禁止。默認為true：停止。如果設置為false， 用戶操作swiper之后自動切換不會停止，每次都會重新啟動autoplay。操作包括觸碰，拖動， 點擊pagination等。*/ },*/ //如果需要分頁器 pagination: { el: '.swiper-pagination', }, //如果需要按鈕 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滾動條 scrollbar: { el: '.swiper-scrollbar', }, }); } </script> ```