移动端触摸滑动插件swiper使用方法详解
2017-08-11 10:58
961 查看
Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.css" rel="external nofollow" > <style> /*假设设计稿是640 轮播图区域640*300*/ html{ font-size:100px; } html,body{ width:100%; overflow-x:hidden; } .swiper-container{ margin:0 auto; height:3rem; overflow:hidden; } .swiper-slide{ height:3rem; } .swiper-slide img{ width:100%; height:100%; } </style> </head> <body> <section class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner1.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner2.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner3.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </section> <script src='swiper.min.js'></script> <script> //REM 响应式 ~function(){ var desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN; document.documentElement.style.fontSize = ratio*100 + "px"; }(); //初始化swiper实现区域的滑动 //new Swiper([container selector],[settings]) var swiper1 = new Swiper('.swiper-container',{ loop:true,//无缝衔接滚动 effect:'cube',//滑动效果 autoplay:3000, autoplayDisableOnInteraction:false,//用户操作swiper之后不禁止autoplay pagination:'.swiper-pagination', paginationType:'progress',//分页器样式 lazyLoading:true,//图片延迟加载 lazyLoadingInPrevNext:true//前一个和后一个延迟加载 }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
- 轮播组件Swiper实现移动端网站的内容触摸滑动使用方法
- Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件
- 移动端触摸滑动插件Swiper
- 开源,免费的移动端触摸滑动插件------swiper介绍----淘抢购时间选择加载产品
- SwiperJS 插件 常用于移动端网站的内容触摸滑动
- swiper:前应用较广泛的移动端网页触摸内容滑动js插件
- Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件
- vue-awesome-swiper滑块插件使用方法详解
- 开源,免费的移动端触摸滑动插件------swiper介绍----淘抢购时间选择加载产品
- Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件
- 移动端触摸滑动插件Swiper
- 仿移动端触摸滑动插件swiper,的简单实现
- 手机端滑动插件swiper3.x的使用示例
- [JS插件] Swiper:强大的触摸滑动&整屏滚动插件
- iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 返回顶部的3中方法(解决移动端使用zepto没有滑动的效果)
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动