多组图自动无限循环(swiper轮播)
前两天的一个项目中遇到多组图片无限轮播,当时采用了swiper 但是没有解决让它无限轮播。今天再次尝试了一下发现是自己的样式写错了。今天在这里写一下,为了给自己一个警醒不要犯同样的错误
首先先引入一下swiper的css文件和js文件
<link rel="stylesheet" type="text/css" href="../swiper-4.5.0/dist/css/swiper.min.css" />
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="../swiper-4.5.0/dist/js/swiper.min.js"></script>
之后再HTML中写入轮播的
<div class="tupian swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="tupianimg">
<img src="../img/img/lunbo1.png" />
</div>
</div>
<div class="swiper-slide">
<div class="tupianimg">
<img src="../img/img/lunbo2.png" />
</div>
</div>
<div class="swiper-slide">
<div class="tupianimg">
<img src="../img/img/lunbo3.png" />
</div>
</div>
<div class="swiper-slide">
<div class="tupianimg">
<img src="../img/img/lunbo4.png" />
</div>
</div>
<div class="swiper-slide">
<div class="tupianimg">
<img src="../img/img/lunbo5.png" />
</div>
</div>
<div class="swiper-slide">
<div class="tupianimg">
<img src="../img/img/lunbo1.png" />
</div>
</div>
<div class="swiper-slide">
<div class="tupianimg">
<img src="../img/img/lunbo2.png" />
</div>
</div>
<div class="swiper-slide">
<div class="tupianimg">
<img src="../img/img/lunbo3.png" />
</div>
</div>
</div>
</div>
css样式
.container {
width: 100%;
}
.container .tupian {
margin-top: 19px;
height: 200px;
}
.swiper-container {
width: 900px;
margin: 0 auto;
height: 200px;
}
.container .tupian .swiper-slide {
width: 300px;
height: 200px;
} .container .tupian .tupianimg {
width: 100%;
height: 200px;
position: relative;
} .container .tupian .tupianimg img {
width: 100%;
height: 200px;
}
script
var swiper = new Swiper('.swiper-container', {
spaceBetween: 20,
loop: true,
slidesPerView: 'auto',
loopedSlides: 5,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
});
这样就可以完成自动无限轮播
多组图自动无限循环(swiper轮播)的更多相关文章
- 自定义完美的ViewPager 真正无限循环的轮播图
网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢 ...
- swiper轮播图(逆向自动切换类似于无限循环)
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- 视频swiper轮播
关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...
- 使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...
- Swiper轮播手动后不动
最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
随机推荐
- Oracle查询临时表空间的占用
可以使用以下语句查询是哪个session number的哪个sql占用了较大的临时表空间 select inst_id,username,session_num,sql_id,tablespace,s ...
- phpStudy环境安装SSL证书教程
第一步:修改apache目录下的httpd.conf配置文件(D:\phpStudy\PHPTutorial\Apache\conf\ ) #LoadModule ssl_module modules ...
- ok6410如何从sdram中启动uboot 调试 这是一个猜想还没有验证
1\在smdk6410.h中定义宏 //#define CONFIG_SKIP_LOWLEVEL_INIT 1 //#define CONFIG_SKIP_RELOCATE_UBOOT 12\将编译的 ...
- JS控制语句(if、for等)、数组(例题)、方法(常用方法介绍)
控制语句 If if (1>2){ alert() } var a= parseInt(prompt('请输入数字')); if (isNaN(a)) { alert("输入的不是数字 ...
- 2、Storm中的一些概念理解
1.Tuple,Value,Field Tuple官方解释: "A tuple is a named of values where each value can be any type.& ...
- jmeter的新增函数说明
本文算是对<零成本实现Web性能测试:基于Apache JMeter>中的<详解JMeter函数和变量>进行狗尾续貂哈,因为最近版本的jmeter增加了几个新函数,在原书中没有 ...
- VMware下liunx虚拟机仅主机模式上网
VMware上的配置 虚拟网络编辑器上的仅主机模式设置 可以自定义虚拟机的网段,我设置的是192.168.137.0 选择对应网卡的联网方式为仅主机模式 配置虚拟机网卡,主要是按虚拟网卡编辑器中设置的 ...
- bzoj 1283 序列 - 费用流
题目传送门 传送门 题目大意 给定一个长度为$n$的序列,要求选出一些数使得原序列中每$m$个连续的数中不超过$K$个被选走.问最大的可能的和. 感觉建图好妙啊.. 考虑把问题转化成选$m$次数,每次 ...
- LGOJ P3919【模板】可持久化数组(可持久化线段树/平衡树)
代码 //可持久化线段树 #include <cstdio> using namespace std; struct node { node *Lnode,*Rnode; int val; ...
- kali网络配置
touch 1.txt#创建一个文件 配置网卡 auto eth0iface eth0 inet staticaddress 172.16.30.102#要设置的主机IP地址netmask 255.2 ...