swiper 单slide轮播
2016-03-17 15:14
585 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/swiper.min.css"/> <script src="jslib/swiper.min.js"></script> <style> .swiper-container { width: 800px; height: 100%; } .swiper-slide { width: auto; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div style="width:1900px"> <div style="width:33.33%;height:400px;float:left;background-color:pink;"></div> <div style="width:33.33%;height:400px;float:left;background-color:green;"></div> <div style="width:33.33%;height:400px;float:left;background-color:yellow;"></div> <div style="clear:both;"></div> </div> </div><!-- swiper-slide --> </div><!-- swiper-wrapper --> <!-- Add Scroll Bar --> <div class="swiper-scrollbar"></div> </div><!-- swiper-container --> <script> var swiper = new Swiper('.swiper-container', { scrollbar: '.swiper-scrollbar', slidesPerView: 'auto', freeMode: true, scrollbarHide:false, resistanceRatio : 0 }); </script> </body> </html>
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- js数组实现图片轮播
- Apple官网研究之使用Justify布局导航
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- js可突破windows弹退效果代码
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- JSP脚本漏洞面面观
- C#自写的一个HTML解析类(类似XElement语法)
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理