一、什么是swiper

  1. 开源、免费、强大的触摸滑动插件

  2. Swiper常用于移动端网站的内容触摸滑动

  3. Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果

#二、如何使用

1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件

 <link rel="stylesheet" href="dist/css/swiper.min.css">

 <script src="dist/js/swiper.min.js"></script>
 

2.HTML内容

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
 

3.初始化调用Swiper

 var mySwiper = new Swiper ('.swiper-container', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}, // 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}, // 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
 

#三、Swiper常用属性

#initialSlide 初始下标
initialSlide:1 //显示第一个slide
 
#direction 轮播方向
direction:horizontal水平 | vertical垂直
 
#loop 是否循环
loop:true | false
 
#effect 切换效果
effect:'slide默认,位移' | 'fade淡入' | 'cube方块' | 'coverflow 3d流' | 'flip 3d翻转'
 
#autoplay 自动轮播
autoplay:true  等价于{
delay:3000, //每个滑块间隔的时间
stopOnLastSlide:false,// 是否在最后就一个滑块停下来
disableOnInteraction:true 如果手动的滑动 则会停止自动轮播
}
 
#pagination 分页器
pagination:{
el:'', //分页器类名
type:'bullets圆点'|'fraction数字'|'progressbar进度条'//分页器样式
}
 
#on 注册事件
on: { //this指代Swiper实例
slideChange: function () { //当发生切换时触发
console.log(this.activeIndex); //当前下标
console.log(this.previousIndex); //上一项下标
},
slideChangeTransitionStart:function(){ //切换动画开始执行前 },
slideChangeTransitionEnd:function(){ //切换动画执行结束后 }
}
 
#swiper.slideTo(index,speed) 控制swiper切换到指定的slide
index 将要切换到的slide下标
speed 时间

移动端 Swiper的更多相关文章

  1. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  2. 【转】github上值得关注的前端项目

    综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单.star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站.博客.以及活跃 ...

  3. github上值得关注的前端项目【转】

    今天突然看到了这些资源,所以就转载过来了,虽然是2015年的,但是可以看一下 综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单.star:15000 front-e ...

  4. 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage

    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...

  5. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

  6. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  7. 移动端效果之Swiper

    写在前面 最近在做移动端方面运用到了饿了么的vue前端组件库,因为不想单纯用组件而使用它,故想深入了解一下实现原理.后续将会继续研究一下其他的组件实现原理,有兴趣的可以关注下. 代码在这里:戳我 1. ...

  8. 前端笔记之移动端&响应式(下)默认样式&事件&惯性抛掷&swiper&loaction对象

    一.移动端默认样式 ·IOS和Android下触摸元素时出现半透明灰色遮罩 a,input,button{ -webkit-tap-highlight-color: transparent; } ·I ...

  9. 16.vue-cli跨域,swiper,移动端项目

    ==解决跨域:== 1.后台 cors cnpm i -S cors 2.前端 jsonp 3.代理 webpack: myvue\config\index.js 找 proxyTable proxy ...

随机推荐

  1. Django解决(1146, "Table 'd42.django_session' doesn't exist")方法

    执行 ./manage.py makemigrations sessions ./manage.py migrate sessions

  2. laravel 返回SQL

    默认情况下,toSql 获取到的 sql 里面的参数使用 "?" 代替的,如下: 1 DB::table('user')->where('id', 1)->toSql( ...

  3. Centos7安装Nginx详细步骤

    前言 Nginx 是一款轻量级的Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 常用用途: ✓ 1. 反向代理 ✓ 2. 正向代理 这里我给来2张图,对正向代理与反响代理 ...

  4. 【电子取证:FTK Imager篇】DD、E01系统镜像仿真

    星河滚烫,人生有理想! ​ ---[suy999] DD.E01系统镜像动态仿真 (一)使用到的软件 1.FTK Imager (v4.5.0.3) 2.VMware Workstation 15 P ...

  5. JDBC【3】-- SPI技术使用以及在数据库连接中的使用

    目录 1.SPI是什么? 2.如何使用SPI来提供自定义服务? 2.1 DBInterface定义接口 2.2 模拟Mysql实现驱动 2.3 模拟SqlServer实现驱动 2.4 模拟用户使用不同 ...

  6. js中定时器调用函数时为什么会有引号

    之前在学习的时候并没有发现的细节,关于js中,定时器的问题 这里我们写两个延时器 setTimeout(func, 0); setTimeout("func()", 0);定时器中 ...

  7. C#(二)基础篇—操作符

    2020-12-02 本随笔为个人复习巩固知识用,多从书上总结与理解得来,如有错误麻烦指正 1.数学操作符 int a=2,b=3,c=0; float d=0; c=a+b; //c=5 c++; ...

  8. Windows平台部署Asp.Net Core应用

    一. 简介 Asp.Net Core 部署方式有两种:依赖框架和独立部署. 1. 框架依赖的部署: 顾名思义,依赖框架的部署 (FDD) 依赖目标系统上存在共享系统级版本的 .NET Core. 由于 ...

  9. 20190620_二次开发BarTender打印机时,未能解析主引用“Seagull.BarTender.Print, Version=1.0.0.0, Culture=neutral, processorArchitecture=x86”

    错误提示: 严重性 代码 说明 项目 文件 行 禁止显示状态警告 未能解析主引用"Seagull.BarTender.Print, Version=1.0.0.0, Culture=neut ...

  10. node-sass版本问题

    node-sass sass-loader的问题 出现了版本的问题 版本太高 版本不兼容解决方法: cnpm i node-sass@4.14.1 cnpm i sass-loader@7.3.1 - ...