Basic use of swiper (18)

In this content, we continue to introduce the page turning effect in swiper---3D flip 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 class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

Then go to the js part to add the page turning effect and initialize it.

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                nextButton:'.swiper-button-next',
                prevButton:'.swiper-button-prev',
                grabCursor:true,   //抓手光标开启
                effect:'flip'   //翻转效果：3D翻转

Such a page with a 3D page turning effect is completed

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