轮播一屏多个数量-匀速向左移动

引入swiper

1.html

     <div class="inw-swipper">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop1.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop2.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop3.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop3.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop3.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop3.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop3.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop1.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="company-box">
                                        <img src="images/loop1.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


2.js

var mySwiper = new Swiper('.inw-swipper .swiper-container',{
        loop : true,//可选选项,开启循环
        slidesPerView:8,
        spaceBetween : 10,
        allowTouchMove: false,
        speed: 8000,
        autoplay: { delay: 0, disableOnInteraction: false, }, 
        breakpoints: {  //移动端尺寸显示个数
            768: { slidesPerView: 6, },
            640: { slidesPerView: 4, },
            480: { slidesPerView: 3, },
        }
    })

 

posted on 2024-04-17 18:33  妍若菲  阅读(6)  评论(0编辑  收藏  举报

导航