Swiper走马灯

查看演示立即下载

插件描述：基于swiper的走马灯效果

更新时间：2020-05-10 23:28:33

使用方法

css：

img {
    width:100%;
    height:100%;
}
.swiper-container {
    width:43.75rem;
    height:10.125rem;
    margin:0 auto;
}
.swiper-container-free-mode > .swiper-wrapper {
    transition-timing-function:linear;
}

导入js cs

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

body

<div class="swiper-container" id="case4">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/t1.jpg"></div>
        <div class="swiper-slide"><img src="img/t2.jpg"></div>
        <div class="swiper-slide"><img src="img/t3.jpg"></div>
        <div class="swiper-slide"><img src="img/t4.jpg"></div>
        <div class="swiper-slide"><img src="img/t5.jpg"></div>
        <div class="swiper-slide"><img src="img/t6.jpg"></div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

js：

var swiper = new Swiper('#case4', {
    loop: true, //允许从第一张到最后一张，或者从最后一张到第一张  循环属性
    slidesPerView: 4, // 设置显示三张
    //centeredSlides : true,     //使当前图片居中显示
    freeMode: true, // 使幻灯片滑动时不止滑动一格，且不会自动贴合 
    slidesPerGroup: 1, //定义1张图片为一组
    autoplay: true, //可选选项，自动滑动
    speed: 1000, //设置过度时间
    grabCursor: true, //鼠标样式根据浏览器不同而定 
    autoplay: {
        delay: 1,
        disableOnInteraction: false,
    },
    /*  设置每隔3000毫秒切换 */
    <!-- 分页器 -->
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
    },
});
/* 鼠标悬停 停止动画 */
/* $('.swiper-slide').mouseenter(function () {
    swiper.autoplay.stop();
})
$('.swiper-slide').mouseleave(function () {
    swiper.autoplay.start();
})
*/

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

上一个特效： vue-admin-beautiful跨平台前端集成框架(原创)
下一个特效：手机app数据统计模板