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模式,当轮播到最后一张图时候,做其他事件的更多相关文章

  1. swiper实现一个好看的轮播图

    轮播是我们在编写页面中经常遇到的模块,所以网上也会有各种有有关轮播图的插件.今天忽然间看到了swiper上一个高颜值的轮播功能,顺便做一下分享. 首先页面在head内要先引用 swiper的css 和 ...

  2. 使用Swiper快速实现3D效果轮播

    最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...

  3. swiper入门之快速实现轮播--手机端

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. echarts legend 的单选模式以及轮播技巧

    1.设置 legend 属性: selectedMode: 'single' 2.使用 myCharts.dispatchAction 来设置legend的聚焦 broadcast (v) { // ...

  5. IOS 图片轮播实现原理 (三图)

    IOS 图片轮播实现原理的一种 图片轮播所要实现的是在一个显示区域内通过滑动来展示不同的图片. 当图片较少时我们可以采用在滚动视图上添加很多张图片来实现. 但是如果图片数量较多时,一次性加载过多图片会 ...

  6. swiper 的左右箭头放到轮播外面

    <!-- 增加一个father的包裹 --> <div class="swiper-father"> <div class="swiper- ...

  7. swiper在一个页面多个轮播图

    <script> var swiper = new Swiper('.swiper-container1', { spaceBetween: 30, centeredSlides: tru ...

  8. Swiper 移动端全屏轮播图效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 在Nuxt中使用react-id-swiper封装公共的轮播图组件(移动端

    首先就是引入swiper import Swiper from 'react-id-swiper': 一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理 一般情况下,一张图是 ...

随机推荐

  1. Java内存管理简述

    转自:http://www.codeceo.com/article/java-memory-area.html 一.概述 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干不同的数据 ...

  2. Windows的ODBC配置指南: MySQL, PostgreSQL, DB2, Oracle

    MySQL- 官网: https://dev.mysql.com/downloads/connector/odbc/- 安装: * msi格式, 直接安装即可 * zip格式, 解压缩, 命令行(管理 ...

  3. 本地仓库_remote.repositories(拒绝访问)

    问题描述: 通过阿里云配置本地的 Maven 仓库,使用 Maven 命令在进行打包.编译等一系列操作时候,总是出现提示某个 Jar 文件 ---> 『.....\ _remote.reposi ...

  4. Java高新技术第二篇:反射技术

    今天我们来看一下Java中的反射技术: 首先来了解一下Java中的反射的一些概念: Java中的反射是1.2引入的 反射的基石:class类 Class类的各个实例对象分别对应各个类在内存中的字节码, ...

  5. 「THUSC 2016」成绩单 & 方块消除 (区间dp)

    成绩单 $f[l][r][mi][mx]$表示从l到r发到还没发的部分的最小值为mi最大值为mx时的最小代价. $f[l][r][0][0]$表示从l到r全部发完的代价. 自己写的无脑dp,枚举中转点 ...

  6. CSS 圣杯布局

    前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握. 事实上,圣杯布局其实和双飞翼布局是一回事.它们实现的都是三栏布局, ...

  7. Delph i2010

    我在习惯Delphi2010 转载   一直留着一个txt文件,不晓得是干嘛的(忘记了),偶然打开一看.乖乖~ 2010 还可以这样玩. 1.循环有了新用法 procedure TForm1.Butt ...

  8. Java多线程中提到的原子性和可见性、有序性

    1.原子性(Atomicity)   原子性是指在一个操作中就是cpu不可以在中途暂停然后再调度,既不被中断操作,要不执行完成,要不就不执行. 如果一个操作时原子性的,那么多线程并发的情况下,就不会出 ...

  9. rmReport 自适应行高(自动行高)

    这个问题 1.先中主项数据--属性--stretched(伸展):true 选中主项数据中的所有列--属性--其他属性--自动折行 --伸展

  10. jdbc_mysql----interset