swiper

介绍

Swiper是一款前端制作轮播图的插件

安装

cdn

可以进入https://www.swiper.com.cn/cdn/index.html 直接复制，一般使用4.0.1版本，复制下面两行，并且修改版本号即可。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.min.js"></script>

安装到本地

将cdn的路径直接复制到浏览器打开，保存到本地，可行但太low，不适合我们高端人才。
使用npm

npm init -y
npm i swiper@4.0.1

引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
    <!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
    <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
    <script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
</body>
</html>

如上，即可将swiper引入到我们的项目中。

使用

初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
    <!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
    <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
    <script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper"><!--这个名字要改成swiper-container-->
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
    </div>
</div>
<script>
    var mySwiper = new Swiper('.swiper', {//这个名字要改成swiper-container
        autoplay: true,//可选选项，自动滑动
      
    })
</script>
</body>
</html>

注意：由于我们使用的swiper4，最外层class名要改为swiper-container，下面的js也要改