swiper3插件无缝滚动配置

最新推荐文章于 2024-01-04 17:01:44 发布

第八个猴子

最新推荐文章于 2024-01-04 17:01:44 发布

阅读量537

点赞数

原文链接：http://www.cnblogs.com/xinghan/p/7889410.html

版权

<html>
<head>
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
　　<!-- 覆盖默认切换效果 为匀速 -->
　　<style>
        /*插件外层容器 用来定义宽高等其他样式*/
        .swiper-container{
            width: 600px;
            height: 300px;
        }
        /*插件的wrapper 这是关键， 覆盖插件默认切换效果为匀速*/
　　　　 .swiper-wrapper{
    　　　　 transition-timing-function: linear;
　　　　 }
　　</style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
        </div>
    </div>
    <script>
    var mySwiper = new Swiper ('.swiper-container', {
        autoplay:1,//自动滚动
        loop:true,//循环
        speed:5000,//滚动速度
        slidesPerView : 4,//slide可见数量
        spaceBetween : 10//slide之间的距离（单位px）
    })
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/xinghan/p/7889410.html

第八个猴子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swiper3插件无缝滚动配置

<html><head> <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css"> <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.j...
复制链接

扫一扫