swiper的基礎使用（十六）

本文為H5EDU機構官方的HTML5培訓教程 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" ></div>
                <div class="swiper-slide" ></div>
                <div class="swiper-slide" ></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強化教程