Swiper你必须知道的参数配制-解析

最新推荐文章于 2025-05-30 14:18:01 发布

橙-极纪元JJYCheng

最新推荐文章于 2025-05-30 14:18:01 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端HTML 文章标签： Swiper

本文链接：https://blog.youkuaiyun.com/cplvfx/article/details/77009755

前端HTML 专栏收录该内容

82 篇文章

订阅专栏

本文介绍如何使用Swiper库创建响应式轮播图，并详细解释了关键参数的意义及用法，包括分页、自动播放等功能。

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

第一步上代码

JS

   var swiper = new Swiper(".news",{
        pagination: ".news_lis",
        paginationClickable: true,
        slidesPerView: 4,
        spaceBetween: 20,
        nextButton: ".news-next",
        prevButton: ".news-prev",
        autoplay: 3000,
        breakpoints: {
            1200: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            640: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        }
    });

html

    <!-- Swiper --><div class="swiper-container news">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination news_lis"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next news-next"></div>
        <div class="swiper-button-prev news-prev"></div>
    </div>

第二步分析

var swiper = new Swiper(".news",{ //绑定置顶容器class
pagination: ".news_lis",//分页clss(就是下面小圆点的容器)
paginationClickable: true,//点击分页圆点是否切换
slidesPerView: 4,//每页显示几个
spaceBetween: 20,//每个间距是多少
nextButton: ".news-next",//绑定下一个按钮容器的class
prevButton: ".news-prev",//绑定上一个按钮容器的class
autoplay: 3000,//设置多少毫秒会执行一次动画（可以理解为：翻页 / 切换）

centeredSlides: false//值为【false】时左对齐，默认就是左对齐，值为【true】时居中对齐
breakpoints: { //响应布局设置
1200: {//如果屏幕宽度小于<1200
slidesPerView: 3,//每页显示3个
spaceBetween: 20//每个间距是20
},
1024: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 20
},
640: {//如果屏幕宽度小于<640
slidesPerView: 1,//每页显示1个
spaceBetween: 10//每个间距是10
}
}
});