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

Basic use of swiper (16)

黄舟

Release： 2017-01-20 15:42:52

Original

1490 people have browsed it

In this content, we will introduce the page turning animation on the swiper page-3D box 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>
            <div class="swiper-pagination"></div>
        </div>

Copy after login

Then initialize and add page turning animation in js. It's still an attribute, but it's a little different.

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

Copy after login

In addition to the directly added attributes, our page turning animation also has its own attributes, which is here

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

Copy after login

In this way, the turning of 3D blocks is realized Page effect

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