Swiper
文章目录
一.什么是Swiper？
Swiper 是一款流行的、专为移动设备优化的滑动触摸插件，它使用JavaScript编写，旨在为网站和应用提供流畅的滑动体验，如轮播图、画廊、滚动新闻等组件。Swiper的特点包括：
- 响应式设计：支持各种屏幕尺寸和设备，适应不同的分辨率，适合构建移动优先的网页应用。
- 触摸滑动：针对触摸设备优化，提供平滑的触控滑动体验，特别适用于智能手机和平板电脑。
- 丰富效果：支持多种过渡效果，如淡入淡出、滑动、立方体旋转等，可以高度定制滑动动画。
- 硬件加速：利用硬件加速来提高滑动性能，尤其在支持这些特性的设备上表现更佳。
- 跨平台兼容：虽然主要为iOS设计，但在Android、Windows Phone 8等系统上也能提供良好的用户体验。早期版本（如Swiper 2.x）还支持PC端及兼容IE7等较老浏览器。
- 轻量级与高性能：作为一款轻量级的框架，Swiper不会大幅增加页面加载时间，同时保持高性能。
- 易于使用和配置：通过简单的HTML结构和JavaScript初始化即可快速设置和使用，同时也提供了丰富的API接口和事件供开发者进行更深层次的定制和交互控制。
- 开源和免费：Swiper遵循MIT许可证，意味着它是完全免费且开源的，适合各种项目使用。
- 持续更新与社区支持：Swiper有一个活跃的社区和定期的更新，确保其与最新的技术和浏览器保持兼容。
随着版本迭代，Swiper不断提升功能和兼容性。例如，Swiper 3.0之后的版本开始减少对PC端的支持，专注于移动设备的优化，但用户可以通过选择较低版本（如Swiper 2.x）来获得更广泛的PC浏览器兼容性。最新版本的Swiper可能引入了更多新特性，比如对HarmonyOS（鸿蒙系统）的支持，进一步扩大了其适用范围。
二.Swiper下载？
官网下载插件: http://www.swiper.com.cn
其他获取方式
通过NPM获取Swiper
$ npm install swiper
三.使用步骤？
1.解压
2.引入相应项目
3.引入文件
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css" />
<script src="dist/js/swiper-bundle.min.js"></script>
注意：修改路径！！！
4.复制代码
将相对应的样式即内容代码复制即可。
四.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 class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
Swiper7的默认容器是’.swiper’，Swiper6之前是’.swiper-container’
五.JS部分
<script>
var mySwiper = new Swiper ('.swiper', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
六.完整代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>swiper</title>
<link rel="stylesheet" href="swiper/swiper-bundle.min.css" />
</head>
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<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-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</body>
<!-- Swiper JS -->
<script src="swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</html>
gination",
type: “fraction”,
},
navigation: {
nextEl: “.swiper-button-next”,
prevEl: “.swiper-button-prev”,
},
});