小程序流程做软文_移动端触摸滑动插件swiper使用

移动端触摸滑动插件swiper使用方法详解       这篇文章主要为大家详细介绍了移动端触摸滑动插件swiper的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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 
 div 
 div 
 img data-src="img/banner/banner1.jpg" alt="" 
 div /div 
 /div 
 div 
 img data-src="img/banner/banner2.jpg" alt="" 
 div /div 
 /div 
 div 
 img data-src="img/banner/banner3.jpg" alt="" 
 div /div 
 /div 
 /div 
 !-- 如果需要分页器 -- 
 div /div 
 !-- 如果需要导航按钮 -- 
 div /div 
 div /div 
 !-- 如果需要滚动条 -- 
 div /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 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。