swiper的基礎使用（十七）

這次內容我們接著介紹在swiper頁面的翻頁動畫--3D覆蓋流效果。
 
先搭建swiper頁面，設定CSS樣式，為了觀看效果，這一章依然在slide當中加入背景圖片。 

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="logo.png"></div>
                <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div>
                <div class="swiper-slide"><img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

然後與我們之前的3D方塊效果使用方法一樣，添加屬性，並對動畫進行設定。

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                grabCursor:true,
                centeredSlides:true,
                slidesPerView:'auto',
                effect:'coverflow', //动画效果：3D覆盖流效果
                coverflow:{
                    rotate:50,
                    stretch:0,
                    depth:100,
                    modifier:1,
                    slideShadows:true
                }
            });

我們的動畫設定當中都設定了什麼？

coverflow:{
                    rotate:50,  //旋转的角度
                    stretch:0,  //拉伸
                    depth:100,  //深度
                    modifier:1, //修正值（该值越大前面的效果越明显）
                    slideShadows:true  //页面阴影效果
                }

最好我們的動畫效果與分組顯示來一起使用，單獨使用效果不好。

以上就是swiper的基礎使用（十七）的內容，更多相關內容請關注PHP中文網（www.php.cn）！