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': 一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理 一般情况下,一张图是 ...
随机推荐
- windows server 2012 安装完只有命令行
今天在安装完windows server 2012 只有命令行,发现没有桌面.然后在别人的提醒下,才发现忘记安装gui了,这个时候,我也懒的重新安装一遍,所以就在网上找如何能够解决问题的方法,下面为解 ...
- C:\Windows\System32\drivers\etc中的hosts文件
这个文件是根据TCP/IP for Windows 的标准来工作的,它的作用是包含IP地址和Host name(主机名)的映射关系,是一个映射IP地址和Host name(主机名)的规定,规定要求每段 ...
- Linux 错误: $'\r': command not found
是linux无法解析$'\r'.这其实是windows与linux系统的差异导致的. 因为linux上的换行符为\n,而windows上的换行符为\r\n.所以脚本到linux上就无法解析了. 通常的 ...
- http/tcp/ip/端口
http是www服务器和本地浏览器之间传输超文本的协议. 每一台机器都有一个属于自己的ip地址,计算机也需要知道是哪个程序来接受信息,这里也就引入了端口号,可以简单地理解每一个程序都有一个唯一的端口号 ...
- h5 input无法输入问题 屏蔽长按事件
开发h5 app中突然发现在手机上长按文本会出现复制粘贴菜单,只要是文本长按都会出现这种情况确实有些不太符合交互,为此特意去翻了一下博客,得到了已下解决方案: 将所有元素的系统默认菜单禁用掉 *{ - ...
- shell脚本明文密码隐藏且加密
将密码放到文件中去,比如/root/.pass.txtpassword=`</root/.pass.txt`还怕密码泄露的话,就把pass.txt权限设置下. chattr +i /root/. ...
- centos7 dns(bind)安装配置
yum install -y bind bind-chroot bind-utils chroot是通过相关文件封装在一个伪根目录内,已达到安全防护的目的,一旦程序被攻破,将只能访问伪根目录内的内容, ...
- VS 2015 Download
企业版:http://download.microsoft.com/download/B/8/F/B8F1470D-2396-4E7A-83F5-AC09154EB925/vs2015.ent_chs ...
- 01退背包——bzoj2287
退背包就是限制某一件物品不可取的方案数 先做出无限制的方案数,然后对于当前不可取的物品,dp2[j]表示不取改物品情况下,取得体积为j的方案数 有状态方程 dp2[j]=dp1[j]-dp2[j-w[ ...
- 48 git使用
0 引言 git/github是当前最好的代码版本管理和协同工作工具.最近我终于用上了这一先进工具,撒花撒花! # 先把大神廖雪峰的链接献上https://www.liaoxuefeng.com/wi ...