swiper的基础使用（二十一）

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

花开艳丽终消散

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

阅读量744

点赞数

CC 4.0 BY-SA版权

分类专栏： swiper介绍文章标签： html5 web前端框架 swiper 移动

本文链接：https://blog.youkuaiyun.com/never__ends/article/details/51838373

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文详细讲解如何在Swiper框架中配置并实现自动翻页功能，从基础布局到CSS样式的设定，全面覆盖设置步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次内容我们介绍在swiper当中实现自动翻页功能。

首先我们要做的依然是做一个swiper的基础布局并且设定CSS样式。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

然后在js当中进行页面的初始化。

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                spaceBetween:30,
                slidesPerView:1,
                centeredSlides:true,
                autoplay:2500, //开启自动翻页功能
                autoplayDisableOnInteraction:true   //在我们对swiper页面进行操作之后是否继续进行翻页  默认为true 设定为false可以继续自动翻页
            });

我们可以看到只需要加入 autoplay的属性就可以进行自动翻页，然后根据需求设定autoplayDisableOnInteraction 属性即可