前两天的一个项目中遇到多组图片无限轮播,当时采用了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轮播)的更多相关文章

  1. 自定义完美的ViewPager 真正无限循环的轮播图

    网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢 ...

  2. swiper轮播图(逆向自动切换类似于无限循环)

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  3. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  4. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  5. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  6. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  7. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  8. Swiper轮播手动后不动

    最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...

  9. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

随机推荐

  1. UnityWebRequest http post json通信

    unity3d 提供了一个用于http通信的类叫:UnityWebRequest,它是www的替代者,所以建议使用这个类.我们这个例子以json格式与服务器通信.这里使用的json组件是:Newton ...

  2. centos7 源码安装php7

    因为php安装需要编译,所以服务器应该保证gcc和g++环境的安装 1. 首先释放安装包: tar -xvzf php-7.0.5.tar.gz cd php-7.0.5 2. 接下来进行参数配置,配 ...

  3. 关于element组件中分页的一些个人思路

    最近在用element,用到了它的分页这个组件,我这边的情况是,我前端请求数据,数据大概有20个的样子,把数据存在data的一个数组里面,用一个v-for循环遍历数组内容,并用div装起来,这样20个 ...

  4. JavaScript 常用内置对象(字符串属性、Math对象、Array数组对象)

    1.字符串属性   <script>   var test_var = "I Iove you"; console.log(test_var.charAt(3)) // ...

  5. shell脚本的一些常用操作

    字符串长度: ${#string}可获取string字符串的长度,如下: jenkins@soft1pc:~$ str="who are you"jenkins@soft1pc:~ ...

  6. c#基础之abstract和interface

    一.abstract abstract 的词义是“抽象”,它用来定义抽象类.抽象类不能被实例化只能被继承. 定义抽象类的格式如下:public abstract ClassName{……} 注意:只有 ...

  7. 基于JAX-WS的webService开发实例

    最近因为工作原因接触到webService,所以记录下开发中碰到的问题,方便自己以后复习,顺便发扬一下开源精神.刚刚接触webServie如果有什么错误欢迎大家指正. 本地环境:myEclipse10 ...

  8. 基于ROS的运动识别

    #!/usr/bin/env python # -*- coding: utf-8 -*- import rospy import cv2 import numpy as np from sensor ...

  9. 安卓GreenDao(基础)

    GreenDao的基础使用很简单,网上一大筐,推荐在简书里面搜索,那么我这里要说些什么呢,试想,这些简单的Demo可以带你了解GreenDao,但你能用这些代码做公司的项目么,肯定不行,所以我结合自身 ...

  10. Linux环境下部署开源版“禅道”方法

    1.开源版安装包下载(Linux系统版本查看命令 uname -a) 32位 [root@iZbp~]# wget http://dl.cnezsoft.com/zentao/9.0.1/ZenTao ...