swiper轮播图(逆向自动切换类似于无限循环)
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高,
,不过还是能够用swiper本身的特性更改成无限循环的轮播的。
<!--HTML代码-->
<div class="course-banner-box">
<div class="swiper-container">
<div class="swiper-wrapper"> <!--四张轮播图-->
<div class="swiper-slide slide1"></div>
<div class="swiper-slide slide2"></div>
<div class="swiper-slide slide3"></div>
<div class="swiper-slide slide4"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="button-box">
<div class="button"> <!--左右按钮-->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div> </div> </div>
</div> <!--script代码--> <script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',//pagination分页器
nextButton: '.swiper-button-next',//前进后退按钮
prevButton: '.swiper-button-prev',
paginationClickable: true,//参数设置为true时,点击分页器的指示点分页器会控制Swiper切换
spaceBetween: 30,//slide之间的距离(单位px)。
centeredSlides: true,//设定为true时,活动块会居中,而不是默认状态下的居左。
loop : true,//复制多份循环(这里就是让轮播看起来是循环的,去掉这个就恢复了默认的swiper轮播)
autoplay: 3000,//自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。
autoplayDisableOnInteraction: false//点击后打断auto-play
});
</script>
swiper轮播图(逆向自动切换类似于无限循环)的更多相关文章
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- iOS 图片轮播图(自动滚动)
iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- swiper轮播图--兼容IE8
//引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...
- swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- swiper 轮播图,拖动之后继续轮播
在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
随机推荐
- Java同步注解:@ThreadSafe、@Immutable、@NotThreadSafe、@GuardedBy
Java并发编程中,用到了一些专门为并发编程准备的 Annotation.主要包括三类: <dependency> <groupId>net.jcip</groupId& ...
- IT这条路,适合什么人走。
今天 ,到图书馆Study,呼,不知道为撒,看到那么多新书,那么多新技术(也不能说是新技术,就是自己没有学习过的技术),特别兴奋,学习的疲劳顿时间就没了,感觉什么都想学,都想据为己有,但是...... ...
- 搭建阿里云lnmp环境 (centos7+nginx+MySQL5.7.9+PHP7)
阿里云一台服务器出现问题! 我估计是一键安装包环境的原因,所以打算重新搭建下环境! 首先,当然是先做好快照!安全第一! 对系统盘做更换系统操作,装上纯净版的centos. 装好后,进入系统 一.挂载数 ...
- Coursera, Deep Learning 4, Convolutional Neural Networks, week3, Object detection
学习目标 Understand the challenges of Object Localization, Object Detection and Landmark Finding Underst ...
- 自定义函数hello,并注册到hive源码中并重新编译
1 编写自己的udf方法hello package cn.zhangjin.hive.udf; import org.apache.hadoop.hive.ql.exec.Description; i ...
- 事件代理on
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【CentOS】MySQL的安装
版本信息:CentOS 7.2 64位 CentOS(Community Enterprise Operating System,中文意思是:社区企业操作系统)是Linux发行版之一,它是来自于Red ...
- __call__
object.__call__(self[, args...]) Called when the instance is “called” as a function; if this method ...
- 页面跳转、底部tabs切换页面
1.页面跳转 import { NavController } from 'ionic-angular'; constructor(public navCtrl: NavController) { } ...
- JDK中Concurrent包介绍及使用(包含atomic包/lock包/并发容器/执行器)
Java Concurrent并发包概括 https://blog.csdn.net/u012232736/article/details/79919450 Java中的Atomic包使用指南 ...