使用Swiper实现无线滚动效果
2016-07-21 16:59
501 查看
swiper地址:http://idangero.us/swiper/api/#.V5B6wJN969s
在HTML body加入以下内容:
m-detail-show:父容器盒子(自己写的,非必须)
swiper-container // Slider main container
swiper-wrapper //Additional required wrapper
swiper-slide //滑动的子元素
swiper-pagination //下方点
css.css:
无图片效果:
在HTML body加入以下内容:
<div class="m-detail-show"> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="../../img/game/banner.png"></div> <div class="swiper-slide"><img src="../../img/game/banner.png"></div> <div class="swiper-slide"><img src="../../img/game/banner.png"></div> <div class="swiper-slide"><img src="../../img/game/default_img_banner.png"></div> <div class="swiper-slide"><img src="../../img/game/default_img_banner.png"></div> <div class="swiper-slide"><img src="../../img/game/default_img_banner.png"></div> <div class="swiper-slide"><img src="../../img/game/default_img_banner.png"></div> <div class="swiper-slide"><img src="../../img/game/default_img_banner.png"></div> <div class="swiper-slide"><img src="../../img/game/default_img_banner.png"></div> <div class="swiper-slide"><img src="../../img/game/default_img_banner.png"></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div> <!-- Swiper JS --> <script src="../../js/lib/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable:true, /*无限轮播*/ autoplayDisableOnInteraction: false, autoplay : 5000 }); </script>
m-detail-show:父容器盒子(自己写的,非必须)
swiper-container // Slider main container
swiper-wrapper //Additional required wrapper
swiper-slide //滑动的子元素
swiper-pagination //下方点
css.css:
.m-detail-show{ margin: 0px; padding: 0px; width: 100%; height: 200px; border: 0.5px solid #d3d3d3; } .swiper-container { width: 100%; height: 100%; } .swiper-wrapper{ width: 100%; } .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; } .swiper-slide>img{ width: 100%; height: 100%; }
无图片效果:
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具