×

swiper插件一个简单实例:无缝滚动

作者:abc1232018.06.14来源:Web前端之家浏览:47216评论:0
关键词:swiper

swiper插件一个简单实例:无缝滚动,不了解的童鞋可以学习下。

<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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js12312412412.html

网友评论文明上网理性发言 已有0人参与

发表评论: