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('.swiper-container',{
pagination:'.swiper-pagination',
paginationClickable:true,
nextButton:'.swiper-button-next',
prevButton:'.swiper-button-prev',
effect:'fade' //动画效果：渐变
});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)!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
