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>
            <div class="swiper-pagination"></div>
        </div>

然後在js當中進行初始化以及添加翻頁動畫。依然是屬性，但是有些不同。

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                grabCursor:true,
                effect:'cube',  //翻页效果：方块
                cube:{
                    shadow:true,
                    slideShadows:true,
                    shadowOffset:20,
                    shadowScale:0.94
                }
            });

那麼除了直接添加的屬性意外，我們的翻頁動畫當中還有著自己的屬性，就是這裡

cube:{
                    shadow:true,   //阴影效果，如果设置为false下面的就不用
                    slideShadows:true,  //页面阴影效果
                    shadowOffset:20,  //阴影的偏移值
                    shadowScale:0.94  //阴影的大小
                }

這樣就實現了3D方塊的翻頁效果

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