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. g++优化开关(暴力必备)

    ) %:pragma GCC optimize("Ofast") %:pragma GCC optimize("inline") %:pragma GCC op ...

  2. Python全栈开发:RabbitMQ/Redis/Memcache/SQLAlchemy

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  3. Apache Tomcat下载、安装、环境变量配置以及项目部署

    前言 针对在本地访问文件或资源出现的跨域问题,可以通过搭建本地服务器来解决,本篇随笔主要介绍通过搭建Apache Tomcat服务器来解决跨域.包括Apache Tomcat的下载.安装.环境变量的配 ...

  4. python_django_urls基础配置

    url配置:请求地址与views函数的匹配 首先,指定根级url配置文件,默认为setting.py中的ROOT_URLCONF='项目名.urls'(俺们也不用去修改啥) 我们urls有两个,一个是 ...

  5. -bash: docker-compose: command not found、linux 安装 docker-compose

    方式1:https://blog.csdn.net/qq_32447321/article/details/76512137 方式2: curl -L https://get.daocloud.io/ ...

  6. 22. 异常(Eception)

    1. 现实生活的病 现实生活中万物在发展和变化会出现各种各样不正常的现象. 1)例如:人的成长过程中会生病. |——病 |——不可治愈(癌症晚期) |——可治愈 |——小病自行解决(上火,牙痛) |— ...

  7. 理解TCP/IP,SOCKET,HTTP,FTP,RMI,RPC,webservic

    TCP/IP:网络宽带,传输数据的基础协议,所有得数据要在网络上传输都是基于TCP/IP协议(或UDP),才能送达到指定的目的地(IP,服务器硬件地址). SOCKET:SOCKET只是面对编程人员的 ...

  8. NX二次开发-算法篇-找相切面

    方法1:通过判断相邻面公共边的光顺性来找相切面 1 #include <uf.h> 2 #include <uf_modl.h> 3 #include <uf_obj.h ...

  9. PaperWeekly 第五期------从Word2Vec到FastText

    PaperWeekly 第五期------从Word2Vec到FastText 张俊 10 个月前 引 Word2Vec从提出至今,已经成为了深度学习在自然语言处理中的基础部件,大大小小.形形色色的D ...

  10. Debian怎么配置网卡(IP)

    来自:http://jingyan.baidu.com/article/a3f121e4d27a53fc9152bb65.html Debian可以配置静态IP.动态IP使Debian连上互联网.用户 ...