swiper的基礎使用（十七）-html教學-PHP中文網

swiper的基礎使用（十七）

黄舟

發布： 2017-01-20 15:44:24

原創

1604 人瀏覽過

這次內容我們接著介紹在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(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                grabCursor:true,
                centeredSlides:true,
                slidesPerView:&#39;auto&#39;,
                effect:&#39;coverflow&#39;, //动画效果：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中文網（m.sbmmt.com）！