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. python中常见的内置函数

    map #自定义map函数 def map_test(func, list): res = [] for item in list: res.append(func(item)) return res ...

  2. [转]PHP base64_encode 在URL地址参数编码上使用

    因为我使用公钥,使用php的 openssl 加密之后的资料 base64_encode()字符串,然后放入请求 url 中当作参数,urlencode(base64_encode()),然后用 ur ...

  3. vue-cli 4058错误

    vue搭建项目 执行命令 npm install -g vue-cli   出现错误 4058 1.按照文章http://www.jb51.net/article/126221.htm操作没有效果 2 ...

  4. 文档 所有空格变为Tab

    遗憾的是记事本.word没有这个功能... 可以生成exe #include <cstdio> #include <cstdlib> #include <cmath> ...

  5. JAVA java

    { 用法: java [-options] class [args...]           (执行类)   或  java [-options] -jar jarfile [args...]    ...

  6. Quick BI 支持多种数据源进行多维分析

    一.摘要 随着互联网的高速发展,数据量爆发式增长的同时,数据的存储形式也开始呈现出多样性,有结构化存储,如 Mysql, Oracle, SQLServer 等,半结构化甚至非结构化存储,如HBase ...

  7. Java中JNI的使用详解第四篇:C/C++中创建Java对象和String字符串对象及对字符串的操作方法

    首先来看一下C/C++中怎么创建Java对象:在JNIEnv中有两种方法是用来创建Java对象的: 第一种方法: jobject  NewObject(jclass clazz  , jmethodI ...

  8. NX二次开发-UFUN获得图纸页数量UF_DRAW_ask_num_drawings

    #include <uf.h> #include <uf_draw.h> #include <uf_ui.h> UF_initialize(); //获得有多少张图 ...

  9. NX二次开发-NXOpen获取边的端点NXOpen::Edge::GetVertices

    NX9+VS2012 #include <NXOpen/Features_BlockFeatureBuilder.hxx> #include <NXOpen/Features_Fea ...

  10. AtCoder ABC 132E Hopscotch Addict

    题目链接:https://atcoder.jp/contests/abc132/tasks/abc132_e 题目大意 给定一张 N 个点 M 条边无自环无重边的一张有向图,求从起点 S 能否三步三步 ...