swiper插件的使用

最近在写项目的时候发现可以使用一个插件帮助我们写轮播图

---

1.打开swiper官网

2.使用swiper

1.首先在获取swiper这里选择下载swiper

2.然后点击第一个选项即可下载

3.解压后打开目录，看到里面有一个package包点进去，找两个文件swiper-bundle.min.css和swiper-bundle.min.js

4.将这两个文件分别放到你项目里面的css文件夹和js文件夹中，并且在页面中引入。

5.在官网的在线演示里选择swiper基础演示，然后选择喜欢的案例在新窗口打开，并查看源代码。

6.将这些html结构的代码写到项目要用到轮播图的对应的结构里

7.将这些样式写到项目的相关css文件中

8.将这些js代码写到项目相应的js文件中

window.addEventListener('load', function () {
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
})

总结

以上就是今天要跟大家分享的swiper插件使用的相关知识。