Swiper基本上使用
导入三个文件
jquery-1.11.1.min.js,swiper.min.js,swiper.min.css
攻略教程
http://www.swiper.com.cn/api/function/2014/1218/111.html
例子:只需要定义下Ban的高度即可,position:relatival ,这个可以不用定义
#Ban{height: 398px}
<div class="swiper-container" id="Ban">
<div class="swiper-wrapper">
<div class="swiper-slide bg-01">slider1</div>
<div class="swiper-slide bg-02">slider2</div>
<div class="swiper-slide bg-03">slider9999</div>
</div>
</div>
<script>
var mySwiper = new Swiper('#Ban',{
autoplay : 1000,
})
</script>
Swiper基本上使用的更多相关文章
- 前端笔记之移动端&响应式(下)默认样式&事件&惯性抛掷&swiper&loaction对象
一.移动端默认样式 ·IOS和Android下触摸元素时出现半透明灰色遮罩 a,input,button{ -webkit-tap-highlight-color: transparent; } ·I ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- swiper插件 纵向内容超出一屏解决办法
1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...
- swiper的初步使用
1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...
- 关于移动端swiper的2种样式重置
手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- swiper框架,实现轮播图等滑动效果
http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.
- swiper.animate~之~可以执行两种动画的升级版的Swiper Animate
1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...
- swiper横向轮播--3d
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- ASP.NET杂谈-一切都从web.config说起(2)(ConfigSections详解-下)
还是接着上一篇说起,在上两篇中主要和大家探讨了ConfigSection的几种常用形式,并举例几个例子说明了一下.其实它们主要都是继承System.Configuration.Configuratio ...
- [转] JPQL
原文地址:http://blog.csdn.net/suncaishen/article/details/6512028 select name ,age from user; //原生SQL语句 s ...
- EditText 几种显示方式,固定行数,自适应行数
1.显示7行,超过7行自动向下补充行数 <EditText android:id="@+id/edt_content" android:layout_width=" ...
- iOS开发--换肤简单实现以及工具类的抽取
一.根据美工提供的图片,可以有两种换肤的方案. <1>美工提供图片的类型一: <2>美工提供图片的类型二:这种分了文件夹文件名都一样的情况,拖入项目后最后用真实文件夹(蓝色文件 ...
- VS 2013 未找到与约束contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService...匹配的导出[vs故障]【转】
未找到与约束 contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService RequiredTypeIdentit ...
- SpringMVC与Struts2区别与比较总结
1.Struts2是类级别的拦截, 一个类对应一个request上下文,SpringMVC是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应,所以说从架构本身上Spr ...
- for循环 打印菱形 空 和 实
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><?ph ...
- js 对象 copy 对象
function clone(myObj) { if (typeof (myObj) != 'object') return myObj; if (myObj == null) return myOb ...
- TopCoder SRM 596 DIV 1 250
body { font-family: Monospaced; font-size: 12pt } pre { font-family: Monospaced; font-size: 12pt } P ...
- wpf数据绑定
前段: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.c ...