JS 流行库（五）：Swiper

Reyn Morales

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

阅读量835

点赞数 1

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

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

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

版权

JS 流行库专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
</div>

JavaScript 代码

示例如下：

window.onload = function () {
    let mySwiper = new Swiper('.swiper', {
        pagination: {   // 分页
            el: '.swiper-pagination',   // DOM 元素
            clickable: true,            // 分页点击
            dynamicBullets: true        // 动态分页
        }
    });
}

在上述示例中，演示了部分 pagination 的属性，详情可以查询 API 文档

无限循环

如果在 Swiper 中实现无限循环，那么可以在初始化时配置选项，从而实现无限循环功能，示例如下：

window.onload = function () {
    let mySwiper = new Swiper('.swiper', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true
        },
        loop: true  // 无限循环
    });
}

自动切换

如果在 Swiper 中实现自动切换，那么可以在初始化时配置选项，从而实现自动切换功能，示例如下：

window.onload = function () {
    let mySwiper = new Swiper('.swiper', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true
        },
        loop: true,
        autoplay: { // 自动切换
            delay: 2000 // 延迟时间
        }
    });
}

<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 class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JavaScript 代码

示例如下：

window.onload = function () {
    let mySwiper = new Swiper('.swiper', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true
        },
        loop: true,
        autoplay: {
            delay: 2000
        },
        navigation: {   // 导航
            nextEl: '.swiper-button-next',  // DOM 元素
            prevEl: '.swiper-button-prev',  // DOM 元素
        }
    });
}

动画

在切换焦点图内容时，Swiper 可以为内容添加动画，过程如下：

HTML 结构

示例如下：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="bounceIn">Slide 1</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="bounceInDown">Slide 2</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="bounceInUp">Slide 3</p>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JavaScript 代码

示例如下：

window.onload = function () {
    let mySwiper = new Swiper('.swiper', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true
        },
        loop: true,
        autoplay: {
            delay: 2000
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        on: {
            init: function () {
                swiperAnimateCache(this);   // 隐藏动画元素 
                swiperAnimate(this);        // 初始化完成开始动画
            },
            slideChangeTransitionEnd: function () {
                swiperAnimate(this);        // 每个 slide 切换结束时也运行当前 slide 动画
            }
        }
    });
}

Swiper 中动画效果的底层原理是 CSS3 的动画，如此我们可以在 CSS 代码中自定义动画，示例如下：

@keyframes myAnimation {
    0% {
        opacity: 0;
        transform: scale(2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.myAnimation {
    animation-name: myAnimation;
}

将相应 DOM 元素的 swiper-animate-effect 属性设置为自定义动画名称即可，示例如下：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="myAnimation">Reyn Morales</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="bounceInDown">Slide 2</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="bounceInUp">Steven Jobs</p>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

此外，也可以在 HTML 中通过 swiper-animate-duration 和 swiper-animate-delay 属性配置动画的持续时间和延迟时间，示例如下：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="myAnimation">Reyn Morales</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="bounceInDown" 
                           swiper-animate-duration="0.5s" 
                           swiper-animate-delay="0.3s">Slide 2</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="bounceInUp">Steven Jobs</p>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>