swiper 轮播图,最后一张图与第一张图无缝衔接
最后 无缝 一张 轮播 swiper
2023-09-11 14:19:17 时间
问题描述:
最近用 swiper 做广告轮播图,然后发现当滑动到最后一张图片时,中间的图片会一闪而过,这样影响美观。
问题解决:
增加 loop: true 属性;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机端轮播图</title>
<link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>
<div class="contenter">
<div class="swiper-container">
<div class="swiper-wrapper" loop="true">
<div class="swiper-slide"><a href="#"><img width="100%" src="./images/banner.jpg" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img width="100%" src="./images/banner2.jpg" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img width="100%" src="./images/banner.jpg" alt=""></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="./js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
loop: true,//最后一张与第一张无缝链接
autoplay:3000,//可选选项,自动滑动时间
pagination: '.swiper-pagination',
paginationClickable: true,
})
</script>
</body>
</html>
相关文章
- CSS: 给表格的第一列和最后一列不同的样式
- win10安装visual C++ 6.0,在最后显示安装程序正在更新您的系统,然后就无响应
- java获取本月开始时间和结束时间、上个月第一天和最后一天的时间以及当前日期往前推一周、一个月
- Java实现 LeetCode 58 最后一个单词的长度
- Java实现 LeetCode 34 在排序数组中查找元素的第一个和最后一个位置
- PHP获取本周第一天和最后一天
- 【python cookbook】【数据结构与算法】3.保存最后N个元素
- java删除文本文件最后一行为NUL的字符
- 测试的对自己的要求要高,你自己对测试质量的要求太低了,测试这里放松一下,问题就会放大几倍!!!!测试是最后的质量防线了
- webform 最后的黄昏之力
- LeetCode-58. 最后一个单词的长度
- android 9.0 Launcher3长按拖拽时最后一屏未满时不让拖拽到后一屏(二)
- Leetcode 1352. 最后 K 个数的乘积(不知为啥会超时)
- 最后一个单词的长度/C++
- UITableView去掉最后切割线的一种方法
- linux sed 日志分析 打印行数 最后一行
- 数列分块入门(最后一个难啊)
- sphinx索引部分源码续——过程:连接到CSphSource对应的sql数据源,通过fetch row取其中一行,然后解析出field,分词,获得wordhit,最后再加入到CSphSource的Hits里