swiper的基础使用（十八）

最新推荐文章于 2025-05-06 13:53:38 发布

原创最新推荐文章于 2025-05-06 13:53:38 发布 · 759 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #swiper #web前端 #框架 #移动

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍如何使用Swiper库创建具有3D翻转效果的页面。通过设置CSS样式及JavaScript初始化配置，实现图片轮播的3D翻页效果。

本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果

首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在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>

然后到js部分添加翻页效果，进行初始化。

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

这样一个带有3D翻页效果的页面就完成了