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': 一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理 一般情况下,一张图是 ...
随机推荐
- DEV插件下的控件Grid和Gridlookupedit控件的结合使用
创建GridlookupEtid控件 设置其对应属性: 设置属性 this.gridLookUpEdit1.Properties.TextEditStyle = DevExpress.XtraEdit ...
- apache + php 无法访问redis
1.在有扩展的情况下 2.测试连接 <?php $redis=new Redis(); $redis->connect('127.0.0.1',6379); echo "succ ...
- boost 大小端转换
boost 中有一个edmian 里面有转换函数模板 native_to_little<T> 本地转换为小端 native_to_bit<T> 本地转换为大端
- requests中text和content的区别
# -*- coding: utf-8 -*- __author__ = "nixinxin" import re img_url = "https://f11.baid ...
- jq-demo-2种吸顶效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Oracle 修改 新增 触发器 针对字段修改 触发器 误删Oracle表、数据、触发器找回 闪回查询
emmmm 写这个博客心情很复杂,,,本来这个触发器早就写好了,后来发生点事就写个博客当个备份吧,就当留纪念了:话不多数上问题以及SQL: 问题: 在ABONPB表上增加一个触发器,针对车牌号字段做u ...
- 【JZOJ6403】a
description analysis 考虑\((0,0,0)\)走到某个点\((i,j,k)\)的贡献,相当于插板问题 \(i+j\)个空插\(k\)个板可以有空,\(i\)个空插\(j\)个板可 ...
- 【Http】keepalive
http是现在web领域极其普遍的应用层传输协议, 目前常见的使用版本则是http1.1, 当然最先版本是http2.0. 传统的Http应用里都是一次TCP连接一次request. image ...
- Java中JNI的使用详解第五篇:C/C++中操作Java中的数组
在Java中数组分为两种: 1.基本类型数组 2.对象类型(Object[])的数组(数组中存放的是指向Java对象中的引用) 一个能通用于两种不同类型数组的函数: GetArrayLength(ja ...
- 矩阵乘法分配律+bitset优化——hdu4920
因为是模3,所以把原矩阵拆成两个01矩阵,然后按分配律拆开分别进行矩阵乘法,行列用bitset来存进行优化即可 注意 int bitset<int>::count() 函数可以统计bits ...