Swiper4的基本使用
2024-08-30 07:06:09
基本介绍:
- 中文文档地址:https://www.swiper.com.cn/
- 它是一个开源,免费,强大的触摸滑动插件。
- 它是用纯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>
效果展示:
其他额外参数请参考中文文档。
最新文章
- (转载)JavaWeb学习总结(五十一)——邮件的发送与接收原理
- HTTP协议及其请求头分析
- exec命令
- C++ note
- Reading Csv Files with Text_io in Oracle D2k Forms
- TCP同步传送数据示例(简洁、清楚)
- SQL开发技巧(二) 【转】感觉他写的很好
- h2database源码浅析:锁与MVCC
- android使用微软EWS发送邮件
- pendingIntent初步_什么是pendingIntent
- javascript实现当前页导航激活
- 什么时候该选用Xamarin?
- Java中list<;Object[]>;、list<;Student>;、list<;Map<;String,String>;>;排序
- [学习笔记] 模拟退火 (Simulated Annealing)
- C# webapi 上传下载图片
- 【转载】使用Jquery操作Cookie对象
- linux(fedora) 第三课
- SQL Server 备份还原
- 服务消费和负载(Feign)
- mysql 主从复制change master to
热门文章
- 微信小程序图片宽度100%,高度自适应
- Oracle 03113
- [SQL]用于提取组内最新数据,左连接,内连接,not exist三种方案中,到底谁最快?
- etcd启动报错:couldn&#39;t find local name ";default"; in the initial cluster configuration
- Filebeat的使用
- UPDATE REPLACE 替换";\\";
- libmodbus学习笔记
- Linux下 nohup后台运行springboot jar 包时,使用指定的 application.yml配置
- 复制centos 后不能上网,处理办法
- spring boot前后端参数传递方式