Basic use of swiper (17)-HTML Tutorial-php.cn

Basic use of swiper (17)

黄舟

Release： 2017-01-20 15:44:24

Original

1579 people have browsed it

In this content, we will introduce the page turning animation on the swiper page-3D overlay flow effect.

First build the swiper page and set the CSS style. In order to see the effect, this chapter still adds a background image to the 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>

Copy after login

Then add attributes and set animations in the same way as our previous 3D block effect.

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
                }
            });

Copy after login

What are we setting in our animation settings?

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

Copy after login

It is best to use our animation effects together with group display. The effect is not good when used alone.

The above is the basic use of swiper (seventeen). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!