功夫码

轮播插件 swiper2.7的使用方法

晓峰 时间:2019-09-10 10:05:49 阅读:16

轮播插件 swiper2.7的使用方法

需要下载swiper2.7的js,和css,下载地址:

https://2.swiper.com.cn/download/index.html

只需下载下面的idangerous.swiper2.7.6.js或idangerous.swiper2.7.6.min.js,和idangerous.swiper2.7.6.css,和还需要引入jquery库。

<style>
// 必须要设置轮播图的高度
.top-swiper-container{
    height:350px;
    text-align: center;
    position: relative;
}
.top-swiper-container img{
    min-height:350px;
}

// 分页的的样式需要写
.swiper-pagination {
    position: absolute;
    z-index: 20;
    bottom: 10px;
    width: 100%;
    text-align: center;
}
.swiper-pagination-switch {
    display: inline-block;
    width: 30px;
    height: 8px;
    border-radius: 8px;
    background: #555;
    margin: 0 5px;
    opacity: 0.8;

    cursor: pointer;
}
.swiper-active-switch {
    background: #298603;
}
</style>

<div class="top-swiper-container">
    <div class="swiper-wrapper">
       <div class="swiper-slide"><img src="xxx.pgn" /></div>
       <div class="swiper-slide"><img src="xxx.pgn" /></div>
       <div class="swiper-slide"><img src="xxx.pgn" /></div>    
    </div>
</div>
<link href="../idangerous.swiper2.7.6.css?v=2.2" rel="stylesheet" type="text/css" />
<script src="..S/jquery-1.7.2.min.js"></script>
<script src="../idangerous.swiper2.7.6.min.js"></script>
<script>
    var mySwiper = new Swiper('.top-swiper-container',{
       autoplay : 5000,//可选选项,自动滑动
       loop : true,//可选选项,开启循环
       //分页,多个分页可以使用不同的class名
       pagination: '.swiper-pagination-banner',
       paginationClickable :true, // 点击分页可以切换
       //用户操作swiper之后,是否禁止autoplay.默认为true:停止。
       autoplayDisableOnInteraction:false,
       //拖动释放时不会输出信息,阻止click冒泡。拖动Swiper时阻止click事件。
        preventLinksPropagation:true
    })
</script>


本文来源:功夫码(gongfuma.com)

声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有,未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

回到顶部