css3之移动端swiper插件的使用
程序员文章站
2022-07-10 21:20:43
...
Swiper是一款免费以及轻量级的移动设备触控滑块js框架，主要用于移动端的网站，移动web apps,native apps 和hybrid apps 。主要是为IOS而设计的，同时，在Android系统也有着良好的用户体验，Swiper从3.0开始不再全面支持pc端。因此，如需在pc上兼容更多的浏览器，可以选择swiper2.x(甚至支持ie7)。
Swiper完全免费并开源（MIT Licensed）,无论你使用在个人网站或者商业网站，都无需付费。
swiper官网https://www.swiper.com.cn可查看相关使用教程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,Initial-scale=0.5,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="swiper.min.css">
<title>Document</title>
<style>
.swiper-container {
width: 100%;
height: 300px;
}
.swiper-container .swiper-wrapper{
max-width: 100%;
}
.swiper-container .swiper-wrapper img{
width: 100%;
height: 300px;
}
.swiper-container .swiper-wrapper .swiper-slide{
max-width: 100%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="test.jpg" alt=""></div>
<div class="swiper-slide"><img src="test2.jpg" alt=""></div>
<div class="swiper-slide"><img src="test3.jpg" alt=""></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>
<script src="swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
</html>
效果如下所示：
以上来自mooc慕课
上一篇： 使用注解和反射判断指定的字段不能为空