swiper3 实现横向滚动播放DIV

设置HTML

<div class="swiper mySwiper">
                <div class="swiper-wrapper my-list-1">
                    <div class="swiper-slide swiper-no-swiping mySwiper-list">
                        <a href="/product/1"><img src="/static/home/images/index_ny.png" /><span>aaaaaaaa</span></a>
                    </div>
                    <div class="swiper-slide swiper-no-swiping mySwiper-list">
                        <a href="/product/2"><img src="/static/home/images/index_xcl.png" /><span>bbbbbb</span></a>
                    </div>
                    <div class="swiper-slide swiper-no-swiping mySwiper-list">
                        <a href="/product/3"><img src="/static/home/images/index_yy.png" /><span>ccccc</span></a>
                    </div>
                    <div class="swiper-slide swiper-no-swiping mySwiper-list">
                        <a href="/product/4"><img src="/static/home/images/index_tshxp.png" /><span>ddddd</span></a>
                    </div>
                </div>
            </div>

设置CSS样式

.swiper-container .swiper-wrapper{
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}

swiper3 的JS

var swiper = new Swiper(".mySwiper", {

            speed: 2500, //匀速时间
            autoplay: {
                delay: 0,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            slidesPerView: 3,
            loop: true,
            loopedSlides: 8,
            spaceBetween: 20,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            onInit: function(swiper) {

            }
});

这篇好文章是转载于：学新通技术网