移动端 Swiper
一、什么是swiper
开源、免费、强大的触摸滑动插件
Swiper常用于移动端网站的内容触摸滑动
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的更多相关文章
- 关于移动端swiper的2种样式重置
手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...
- 【转】github上值得关注的前端项目
综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单.star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站.博客.以及活跃 ...
- github上值得关注的前端项目【转】
今天突然看到了这些资源,所以就转载过来了,虽然是2015年的,但是可以看一下 综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单.star:15000 front-e ...
- 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage
https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
- 移动端网站的内容触摸滑动-Swiper插件
手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- 移动端效果之Swiper
写在前面 最近在做移动端方面运用到了饿了么的vue前端组件库,因为不想单纯用组件而使用它,故想深入了解一下实现原理.后续将会继续研究一下其他的组件实现原理,有兴趣的可以关注下. 代码在这里:戳我 1. ...
- 前端笔记之移动端&响应式(下)默认样式&事件&惯性抛掷&swiper&loaction对象
一.移动端默认样式 ·IOS和Android下触摸元素时出现半透明灰色遮罩 a,input,button{ -webkit-tap-highlight-color: transparent; } ·I ...
- 16.vue-cli跨域,swiper,移动端项目
==解决跨域:== 1.后台 cors cnpm i -S cors 2.前端 jsonp 3.代理 webpack: myvue\config\index.js 找 proxyTable proxy ...
随机推荐
- Django解决(1146, "Table 'd42.django_session' doesn't exist")方法
执行 ./manage.py makemigrations sessions ./manage.py migrate sessions
- laravel 返回SQL
默认情况下,toSql 获取到的 sql 里面的参数使用 "?" 代替的,如下: 1 DB::table('user')->where('id', 1)->toSql( ...
- Centos7安装Nginx详细步骤
前言 Nginx 是一款轻量级的Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 常用用途: ✓ 1. 反向代理 ✓ 2. 正向代理 这里我给来2张图,对正向代理与反响代理 ...
- 【电子取证:FTK Imager篇】DD、E01系统镜像仿真
星河滚烫,人生有理想! ---[suy999] DD.E01系统镜像动态仿真 (一)使用到的软件 1.FTK Imager (v4.5.0.3) 2.VMware Workstation 15 P ...
- JDBC【3】-- SPI技术使用以及在数据库连接中的使用
目录 1.SPI是什么? 2.如何使用SPI来提供自定义服务? 2.1 DBInterface定义接口 2.2 模拟Mysql实现驱动 2.3 模拟SqlServer实现驱动 2.4 模拟用户使用不同 ...
- js中定时器调用函数时为什么会有引号
之前在学习的时候并没有发现的细节,关于js中,定时器的问题 这里我们写两个延时器 setTimeout(func, 0); setTimeout("func()", 0);定时器中 ...
- C#(二)基础篇—操作符
2020-12-02 本随笔为个人复习巩固知识用,多从书上总结与理解得来,如有错误麻烦指正 1.数学操作符 int a=2,b=3,c=0; float d=0; c=a+b; //c=5 c++; ...
- Windows平台部署Asp.Net Core应用
一. 简介 Asp.Net Core 部署方式有两种:依赖框架和独立部署. 1. 框架依赖的部署: 顾名思义,依赖框架的部署 (FDD) 依赖目标系统上存在共享系统级版本的 .NET Core. 由于 ...
- 20190620_二次开发BarTender打印机时,未能解析主引用“Seagull.BarTender.Print, Version=1.0.0.0, Culture=neutral, processorArchitecture=x86”
错误提示: 严重性 代码 说明 项目 文件 行 禁止显示状态警告 未能解析主引用"Seagull.BarTender.Print, Version=1.0.0.0, Culture=neut ...
- node-sass版本问题
node-sass sass-loader的问题 出现了版本的问题 版本太高 版本不兼容解决方法: cnpm i node-sass@4.14.1 cnpm i sass-loader@7.3.1 - ...