zoukankan      html  css  js  c++  java
  • swiper实现内容自适应匀速滚动

    <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/1.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/2.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/3.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/1.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/2.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/3.png" alt=""></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>
    

      

  • 相关阅读:
    3月6日
    2月28日
    2月23日
    2月20日
    2月19日
    2月18日
    2月17日
    2月16日
    2月15日
    面试算法题——硬币找零
  • 原文地址:https://www.cnblogs.com/xiaojianwei/p/12421699.html
Copyright © 2011-2022 走看看