移动端Swiper滑动插件的使用

Posted 2020-09-30 javenLee

首先去官网下载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/