Home > Article > Web Front-end > Basic use of swiper (18)

Basic use of swiper (18)

黄舟Original: 2017-01-20 15:45:401220browse

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(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                nextButton:&#39;.swiper-button-next&#39;,
                prevButton:&#39;.swiper-button-prev&#39;,
                grabCursor:true,   //抓手光标开启
                effect:&#39;flip&#39;   //翻转效果：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)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Basic use of swiper (17)Next article：Basic use of swiper (17)

See more

Basic use of swiper (18)

Related articles