JS 流行库（五）：Swiper

Reyn Morales

已于 2022-11-03 09:12:40 修改

阅读量967

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 流行库文章标签： javascript 前端 html

于 2022-09-27 16:26:37 首次发布

本文链接：https://blog.csdn.net/Raymiles/article/details/127073463

JS 流行库（五）：Swiper

Swiper 是使用 JavaScript 实现的跨平台滑动特效插件，开源、免费、稳定、简单且功能强大，可以实现焦点图、tab 切换等常用效果

此篇笔记中 Swiper 的版本为 8.x

基本使用

导入 swiper 库

示例如下：

<link rel="stylesheet" href="./swiper-bundle.css">
<script src="./swiper-bundle.js"></script>

不同版本的 Swiper 中导入的文件不同

HTML 结构

示例如下：

<style>
    .swiper {
     
        width: 600px;
        height: 300px;
        text-align: center;
        border: 1px solid black;
        border-radius: 15px;
        box-shadow: 0 0 10px gray;
        margin: 50px auto;
    }

    .swiper-wrapper {
     
        line-height: 300px;
    }
</style>
<div class="swiper">
    <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>
</div>

JavaScript 代码

示例如下：

window.onload = function () {
   
    let mySwiper = new Swiper('.swiper');
}

高级使用

以下将介绍的功能均基于上述已初始化的焦点图

分页器

在 Swiper 中新增分页器的过程如下所示：

HTML 结构

示例如下：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide"

最低0.47元/天解锁文章