# **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> ```