swiper在loop模式,当轮播到最后一张图时候,做其他事件
1、引入文件:
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
2、style样式:
html,
body {
position: relative;
height: 100%;
} body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin:;
padding:;
} .swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
} .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
3、body:
<div class="swiper-container swiper-no-swiping">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="data:image/n1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="data:image/n2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="data:image/n3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="data:image/n4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="data:image/n5.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
4、js:
var swiper = new Swiper('.swiper-container', {
loop: true, //禁止手动滑动
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
speed: 500,
mousewheel: true,
autoplay: {
disableOnInteraction: false, //手动滑动之后不打断播放
delay: 1000
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
//打印suwper当前图片的索引值
on: {
slideChangeTransitionEnd() {
this.active = $('.swiper-slide-active').attr('data-swiper-slide-index')
var sum = this.realIndex + 1
console.log(sum)
}
}
});
swiper在loop模式,当轮播到最后一张图时候,做其他事件的更多相关文章
- swiper实现一个好看的轮播图
轮播是我们在编写页面中经常遇到的模块,所以网上也会有各种有有关轮播图的插件.今天忽然间看到了swiper上一个高颜值的轮播功能,顺便做一下分享. 首先页面在head内要先引用 swiper的css 和 ...
- 使用Swiper快速实现3D效果轮播
最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...
- swiper入门之快速实现轮播--手机端
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- echarts legend 的单选模式以及轮播技巧
1.设置 legend 属性: selectedMode: 'single' 2.使用 myCharts.dispatchAction 来设置legend的聚焦 broadcast (v) { // ...
- IOS 图片轮播实现原理 (三图)
IOS 图片轮播实现原理的一种 图片轮播所要实现的是在一个显示区域内通过滑动来展示不同的图片. 当图片较少时我们可以采用在滚动视图上添加很多张图片来实现. 但是如果图片数量较多时,一次性加载过多图片会 ...
- swiper 的左右箭头放到轮播外面
<!-- 增加一个father的包裹 --> <div class="swiper-father"> <div class="swiper- ...
- swiper在一个页面多个轮播图
<script> var swiper = new Swiper('.swiper-container1', { spaceBetween: 30, centeredSlides: tru ...
- Swiper 移动端全屏轮播图效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 在Nuxt中使用react-id-swiper封装公共的轮播图组件(移动端
首先就是引入swiper import Swiper from 'react-id-swiper': 一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理 一般情况下,一张图是 ...
随机推荐
- python 生成推导式
推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据序列构建另一个新的数据序列的结构体. 共有三种推导,在Python2和3中都有支持: 列表(lis ...
- struts2注解方式的验证
struts2的验证分为分编程式验证.声明式验证.注解式验证.因现在的人越来越懒,都追求零配置,所以本文介绍下注解式验证. 一.hello world 参考javaeye的这篇文章,按着做一次,起码有 ...
- Yii2 : Active Record add Not In condition
$query = MyModel::find()->where(['not in','attribute',$array]); 參考 Yii2 : Active Record add Not I ...
- 解决 java.lang.UnsupportedClassVersionError小记
解决 java.lang.UnsupportedClassVersionError 错误原因是:编译的 class 文件的 jdk版本和运行这个 class 文件的jdk 版本不一致 比如:服务器运行 ...
- CSIC_716_20191128【多态、绑定与非绑定方法、isinstance与issubclass 】
多态 what: 同一个事物有不同的形态. 多态的目的:在不知道对象具体类型的情况下,统一对象调用方法的规范.(通俗讲,即规定实现同样功能的方法,一定要起同样的名字). 多态的表现形式之一就是继承,先 ...
- Delphi StringGrid常用属性和常用操作
StringGrid组件用于建立显示字符串的网格,与电子表格相似.它可使表格中的字符串和相关对象操作简单化.StringGrid组件提供了许多可控制网格外观念的属性,以及利用表格的结构响应用户操作的事 ...
- HDFS(Hadoop Distributed File System)的组件架构概述
1.hadoop1.x和hadoop2.x区别 2.组件介绍 HDFS架构概述1)NameNode(nn): 存储文件的元数据,如文件名,文件目录结构,文件属性(生成时间,副本数,文件权限),以及每个 ...
- Hbase的安装和部署
1.Zookeeper集群的正常部署并启动 $ /opt/modules/cdh/zookeeper-3.4.5-cdh5.3.6/bin/zkServer.sh start 2.Hadoop集群的正 ...
- NX二次开发-UFUN打开选择文件夹对话框UF_UI_create_filebox
#include <uf.h> #include <uf_ui.h> #include <string> using namespace std; string O ...
- NX二次开发-算法篇-冒泡排序(例子:遍历所有点并排序)
NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_curve.h> #include <u ...