一、Swiper插件简介
Swiper是一个纯JavaScript打造的滑动特效插件，面向手机、平板电脑等移动终端，同时也支持桌面浏览器。Swiper开源、免费、稳定、使用简单且功能强大，是架构移动终端网站的重要选择。
它支持触摸滑动、响应式设计、循环滑动、分页器、滚动条等多种功能，非常适合用于轮播图、滑块导航等场景。以下是一个详细的Swiper插件教程及案例介绍。
二、加载插件
首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。
swiper-bundle.min.css文件CDN地址：
<link href=\"https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css\" rel=\"stylesheet\">
swiper-bundle.min.js文件 CDN地址：
<script src=\"https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js\"></script>
使用Swiper插件的步骤主要包括以下几个部分：
?下载Swiper插件?：首先，需要从Swiper的官网(https://swiper.com.cn/)下载Swiper插件。官网提供了多种版本的下载链接，包括压缩版和未压缩版，以及包含动画效果的版本等，可以根据项目需求选择合适的版本下载。
?引入Swiper文件?：下载完成后，将Swiper的CSS和JS文件引入到项目中。通常，这两个文件分别是swiper-bundle.min.css和swiper-bundle.min.js（文件名可能因版本而异）。例如，在HTML中引入这些文件的代码可能如下：
2.1 <!– 引入Swiper CSS –>
<link rel=\"stylesheet\" href=\"../css/swiper-bundle.min.css\">
2.2 <!– 引入Swiper JS –>
<script src=\"../js/swiper-bundle.min.js\"></script>
2.3 <!– 引入Jquery JS –>
<script type=\"text/javascript\" src=\"../js/jquery-3.1.0.min.js\"></script>
Jquery.js 应该在Swiper.js之前引入文件；
三、 编写HTML结构
在HTML中编写Swiper的容器结构。添加HTML内容。Swiper7的默认容器是\’.swiper\’，Swiper6之前是\’.swiper-container\’。
<div class=\"swiper-container\">
<div class=\"swiper-wrapper\">
<div class=\"swiper-slide\"><img src=\"../images/1.jpg\" alt=\"image 1\" /></div>
<div class=\"swiper-slide\"><img src=\"../images/2.jpg\" alt=\"image 2\" /></div>
<div class=\"swiper-slide\"><img src=\"../images/1.jpg\" alt=\"image 3\" /></div>
<!-- 更多 slide -->
</div>
<!-- 如果需要分页器-->
<div class=\"swiper-pagination\"></div>
<!-- 如果需要导航按钮-->
<div class=\"swiper-button-prev\"></div>
<div class=\"swiper-button-next\"></div>
</div>
<div class=\"switch\">
<button id=\"prevBtn\" >上一张</button>
<button id=\"nextBtn\" >下一张</button>
</div>
四、初始化Swiper
使用JavaScript初始化Swiper：创建一个新的Swiper实例，并传入容器选择器和配置选项。例如，可以设置轮播的方向、是否循环播放、分页器的位置等?
$(document).ready(function () {
var swiper = new Swiper(\'.swiper-container\', {
pagination: {
el: \'.swiper-pagination\',
},
navigation: {
nextEl: \'.swiper-button-next\',
prevEl: \'.swiper-button-prev\',
},
});
$(\'#prevBtn\').click(function () {
swiper.slidePrev();
});
$(\'#nextBtn\').click(function () {
swiper.slideNext();
});
});
五、编写style样式表
调整样式和功能?：根据需要，可以为Swiper定义大小，并添加导航按钮、分页器等组件。这些组件可以放在Swiper容器之外?。
<style type=\"text/css\">
.swiper-container {
display: block;
width: 450px;
height: auto;
}
body {
margin: 50px;
}
img {
width: 450px;
height: auto;
cursor: pointer;
}
#img1 {
width: 450px;
height: auto;
border: 1px solid #ff0000;
}
.switch {
text-align: center;
}
.switch button {
width: 150px; /* 设置按钮的宽度 */
height: 50px; /* 设置按钮的高度 */
padding: 10px 20px; /* 按钮内部的空间 */
background-color: #4CAF50; /* 按钮的背景颜色 */
color: white; /* 文本颜色 */
border: none; /* 无边框 */
border-radius: 5px; /* 边框圆角 */
cursor: pointer; /* 鼠标光标变成手指形状 */
font-size: 16px; /* 文本大小 */
}
.switch button:hover { /* 鼠标悬停时的样式 */
background-color: #45a049;
}
</style>
最后展示的效果图片
