jQuery全屏轮播图插件Swiper

所属分类：媒体-幻灯片和轮播图,滑块和旋转

70193 408 查看评论 (52)

分享到微信朋友圈

查看演示立即下载

插件描述：全屏自适应轮播图支持触摸滑动

在index.js第六行最后可根据自己图片的大小调整高度，同时决定下面选项点的位置，

2018-6-20增加使用方法

滑动后停止轮播问题

var mySwiper = new Swiper('.swiper-container', {
    pagination: '.pagination',
    loop: false,
    autoplay: 3000,
    paginationClickable: false,
    onSlideChangeStart: function() {
        //回调函数
        mySwiper.startAutoplay(); //让滑动后继续自动轮播
    }
});

如果您还要高度自适应，index.js中注释掉以下两句

 var newSlideSize = function slideSize(){
     //var w = Math.ceil($(".swiper-container").width()/3/*--调整高度---*/);
     //$(".swiper-container,.swiper-wrapper,.swiper-slide").height(w);
};

Css样式修改

/*---- banner ---*/
.swiper-container {
    height:100%;
    width:100%;//高度设置100%
    text-align:center;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    z-index:5;
    background:#F8F8F8;
}
.swiper-slide img{
    width:100%;
    height:100%;//高度设置100%
    vertical-align:middle;
    position:relative;
}

jquery弹出职业等多选框

左侧菜单导航

相关插件-幻灯片和轮播图,滑块和旋转