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

Basic use of swiper (15)

黄舟Original: 2017-01-20 15:41:141688browse

This time we introduce the page turning animation on the swiper page - the gradient effect
Since there is page turning, the page turning effect is definitely indispensable. This function is also packaged for us in swiper, so we are using it becomes very convenient.
First perform basic layout and CSS style settings.

<div class="swiper-container">
        <div class="swiper-wrapper">
            <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 swiper-pagination-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>

In order to make the animation effect obvious, I added a background image to each slide.
Then initialize it in JS and add the property of page turning animation.

 var swiper = new Swiper(&#39;.swiper-container&#39;,{
            pagination:&#39;.swiper-pagination&#39;,
            paginationClickable:true,
            nextButton:&#39;.swiper-button-next&#39;,
            prevButton:&#39;.swiper-button-prev&#39;,
            effect:&#39;fade&#39;   //动画效果：渐变
        });

In this way, the gradient page turning animation is realized. It is very simple, just add an attribute (effect:'fade') in the initialization.

The above is the basic use of swiper (15). For more related content, please pay attention to the PHP Chinese website (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 (14)Next article：Basic use of swiper (14)

See more

Basic use of swiper (15)

Related articles