Swiper轮播图

所属分类： JQ特效媒体幻灯片和轮播图

查看演示立即下载

插件描述：基于swiper的几款轮播图，代码有注释方便调用。

更新时间：2020-06-15 00:19:47

更新说明：我把autoplay属性合起来了，切换时间属性是因为之前写了两个autoplay 后面的把前面的覆盖了，所以没有效果我已经把两个合在一起了，这样子就不会出现失效的错误了

更新时间：2020-05-05 22:03:41

使用方法

导入swiper js和css

<link rel="stylesheet" type="text/css" href="./css/swiper.css"/>
<script src="./js/swiper.js" type="text/javascript" charset="utf-8"></script>

以第一个轮播为列：

水平切换

<div class="swiper-container" id="case1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/t1.png"></div>
        <div class="swiper-slide"><img src="img/t2.png"></div>
        <div class="swiper-slide"><img src="img/t4.png"></div>
    </div>
    <!-- 导航按钮 上一页下一页 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

js内容：

var mySwiper = new Swiper('#case1', {
    autoplay: true, //可选选项，自动滑动
    initialSlide: 1, //默认显示第二张图片索引从0开始
    speed: 2000, //设置过度时间
    /* grabCursor: true,//鼠标样式根据浏览器不同而定 */
    autoplay: {
        delay: 3000
    },
    /*  设置每隔3000毫秒切换 */
    <!-- 分页器 -->
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    <!-- 导航按钮 上一页下一页 -->
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    <!-- 滚动条 -->
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
    },
    /*  设置当鼠标移入图片时是否停止轮播*/
    autoplay: {
        disableOnInteraction: false,
    },
});

css内容：设置了一下宽高，居中显示

p{text-align: center;}
    img{ width: 43.75rem;
    height: 18.125rem;
}
.swiper-container{
    width: 43.75rem;
    height: 18.125rem;
    margin:0 auto;
}

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

上一个特效： canvas树形节点结构图
下一个特效： betterscroll制作竖屏直播弹幕