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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM