移动端触摸滑动插件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 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使用方法详解 的全部内容, 来源链接: utcz.com/z/319586.html

回到顶部