移动端Swiper滑动插件的使用

Posted javenLee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端Swiper滑动插件的使用相关的知识,希望对你有一定的参考价值。

首先去官网下载swiper的css样式及js文件。链入需要的页面

<link rel="stylesheet" href="css/idangerous.swiper.css">
<div class="run_banner">
<
div class="swiper-container"> <div class="swiper-wrapper">   <div class="swiper-slide"> <div class="pic" style="background:url(./images/banner_1.png) no-repeat 50% 50%;background-size:cover;"></div> </div> <div class="swiper-slide"> <div class="pic" style="background-image:url(./images/banner_1.png);"></div> </div> <div class="swiper-slide"> <div class="pic" style="background-image:url(./images/banner_1.png);"></div> </div> <div class="swiper-slide"> <div class="pic" style="background-image:url(./images/banner_1.png)"></div> </div> </div> <div class="pagination"></div> </div>
</div>

 一些基本的滑动块样式及分页器样式什么的,在自己的css样式中重新定义

.swiper-container{width:100%;height:13.4rem;}
.swiper-container img{width:100%;height:100%;}
.run_banner .swiper-slide{background-color: #fff;}
.run_banner .swiper-slide .pic{height:13.5rem;width:100%;background-size:cover;background-repeat: no-repeat;background-position: 50% 50%;}
.run_banner .pagination {position: absolute;z-index: 20;left: 0;right:0;text-align:center;margin: 0 auto;bottom: 0.5rem;}
.run_banner .swiper-pagination-switch {display: inline-block;width: 0.5rem;height: 0.5rem;border-radius: 5px;
background: #CCC;margin-right: 0.3rem;cursor: pointer;overflow: hidden;}
.run_banner .swiper-visible-switch {background: #ccc;}
.run_banner .swiper-active-switch {background: #0066cc;}

在js中配置 ,直接写在html中就好,写在body里最下面

<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/idangerous.swiper.min.js"></script>
<script type="text/javascript">     
        $(function(){
            var mySwiper = new Swiper(‘.swiper-container‘, {
                autoplay: 5000,//可选选项,自动滑动
                pagination : ‘.pagination‘, //需要分页器
                paginationType:‘bullets‘, //分页器样式
            })
        })
</script>

需要其他配置可直接参考官网上的文档  http://www.swiper.com.cn/api/

 

以上是关于移动端Swiper滑动插件的使用的主要内容,如果未能解决你的问题,请参考以下文章

做微信公众号时,移动端滑动效果(swiper插件(display:none))显示滑动问题

关于Tab切换中嵌套Swiper移动端滑动插件,导致Swiper插件失效的问题

移动端tab滑动和上下拉刷新加载

仿移动端触摸滑动插件swiper,的简单实现

swiper.js滑动插件

Swiper插件的基本使用方法和案例