首页 > 其他 > 详细

swiper实现内容自适应匀速滚动

时间:2020-03-05 18:41:04      阅读:384      评论:0      收藏:0      [点我收藏+]
<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/1.png" ></div>
            <div class="swiper-slide"><img src="./img/2.png" ></div>
            <div class="swiper-slide"><img src="./img/3.png" ></div>
            <div class="swiper-slide"><img src="./img/1.png" ></div>
            <div class="swiper-slide"><img src="./img/2.png" ></div>
            <div class="swiper-slide"><img src="./img/3.png" ></div>
        </div>
    </div>
    <script>
        var swiper = new Swiper(‘.swiper-container‘, {
            slidesPerView: ‘auto‘, //自适应宽度
            spaceBetween: 3, //间距为3px
            loop: true, //循环滚动
            speed: 2500, //滚动速度2500
            freeMode: true,
            autoplay: { //匀速滚动
                delay: 0, //间隔时间0秒
                stopOnLastSlide: false,
                disableOnInteraction: false, //触摸后仍然执行
            }
        });
    </script>

  

swiper实现内容自适应匀速滚动

原文:https://www.cnblogs.com/xiaojianwei/p/12421699.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!