jQuery全屏轮播图插件Swiper

查看演示立即下载

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

在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;
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：左侧菜单导航
下一个特效： jquery弹出职业等多选框