Basic use of swiper (16)

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="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic use of swiper (16)" ></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>

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

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

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  //阴影的大小
                }

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)!