Swiper4的基本使用
程序员文章站
2022-10-08 22:18:06
基本介绍： 中文文档地址：https://www.swiper.com.cn/ 它是一个开源，免费，强大的触摸滑动插件。 它是用纯Javascript打造的滑动特效插件，既可用于PC端，也可用于移动端设备。 基本使用： 效果展示： 其他额外参数请参考中文文档。 ......
基本介绍：
- 中文文档地址：
- 它是一个开源，免费，强大的触摸滑动插件。
- 它是用纯javascript打造的滑动特效插件，既可用于pc端，也可用于移动端设备。
基本使用：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
<link rel="stylesheet" type="text/css" href="swiper/css/swiper.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.swiper-container {
width: 1000px;
height: 500px;
margin: 100px auto;
background-color: green;
}
.swiper-slide {
font-size: 30px;
text-align: center;
line-height: 500px;
color: #fff;
}
</style>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">1111</li>
<li class="swiper-slide">2222</li>
<li class="swiper-slide">3333</li>
<li class="swiper-slide">4444</li>
<li class="swiper-slide">5555</li>
<li class="swiper-slide">6666</li>
<li class="swiper-slide">7777</li>
</ul>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<!-- 导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="swiper/js/swiper.js"></script>
<script type="text/javascript">
// 初始化swiper
var myswiper = new swiper('.swiper-container', {
// 循环轮播
loop: true,
// 分页器
pagination: {
el: '.swiper-pagination',
// 动态分页器：当你的slide很多时，为true后，分页器会有大小显示
dynamicbullets: true,
},
// 前进后退按钮
navigation: {
nextel: '.swiper-button-next',
prevel: '.swiper-button-prev',
},
// 自动轮播
autoplay: {
delay: 3000,
/**
* stoponlastslide => true: 当切换到最后一个slide时停止自动切换
*/
stoponlastslide: true,
/**
* disableoninteraction：用户操作swiper之后，是否禁止自动轮播
* true(默认) => 停止
* false => 恢复自动轮播
*/
disableoninteraction: false,
}
});
</script>
</body>
</html>
效果展示：
其他额外参数请参考中文文档。
上一篇： 口疮吃什么好的快呢，答案在这里
下一篇： 超过固定宽度或行数显示“...”