swiper插件使用

---

前言

swiper是一款轻量级的轮播图插件,不仅支持pc端更是为移动端而生,用它可以快速地做出一个轮播图,或者扩展使其做出复杂的轮播效果。

一、swiper的官网

swiper的官网是 ：https://www.swiper.com.cn/

二、swiper的使用方法

1.引入插件相关文件

首先进入官网首页，点击获取swiper进行选择下载需要的版本文件

在引入里面css文件中的swiper.min.css和js文件中的swiper.min.js

2.按照规定语法使用

在demo里面找到自己需要用到的模板，在打开这个模板的源代码。复制demo实例文件中的结构html，样式css以及js代码

三、代码演示

1.效果图demo

2.代码演示

       <div class="slider">
            <!-- Swiper 注意不要更改里面的结构和类名 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div