利用swiper（特效 / Progress）插件实现轮播图无限循环

11月23日 14时37分更新

1410

首先需要跟以往其他的一样，需要在代码中引入swiper-container这个组件，即：swiper.min.js和swiper.min.css，官方提供的不同版本可能有所不同，具体请参考官方版本。

如下：

<div class="swiper-container">    
    <div class="swiper-wrapper">    
        <div class="swiper-slide">Slide 1</div>    
        <div class="swiper-slide">Slide 2</div>    
        <div class="swiper-slide">Slide 3</div>    
        <div class="swiper-slide">Slide 4</div>    
        <div class="swiper-slide">Slide 5</div>    
        <div class="swiper-slide">Slide 6</div>    
        <div class="swiper-slide">Slide 7</div>    
        <div class="swiper-slide">Slide 8</div>    
        <div class="swiper-slide">Slide 9</div>    
        <div class="swiper-slide">Slide 10</div>    
    </div>    
    <div class="swiper-button-prev"></div>    
    <div class="swiper-button-next"></div>    
    <div class="swiper-pagination"></div>    
</div>

<script>
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        speed: 2500,
        slidesPerView: 7,
        spaceBetween: 30,
        centeredSlides: true,
        watchSlidesProgress: true,
        on: {
            setTranslate: function() {
                slides = this.slides
                for (i = 0; i < slides.length; i++) {
                    slide = slides.eq(i)
                    progress = slides[i].progress
                    //slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
                    slide.css({
                        'opacity': '',
                        'background': ''
                    });
                    slide.transform(''); //清除样式
                    slide.css('opacity', (1 - Math.abs(progress) / 4));
                    slide.transform('translate3d(0,' + Math.abs(progress) * 10 + 'px, 0)');
                }
            },
            setTransition: function(transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }
            },
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
</script>

.swiper-container {
width: 100%;
height: auto;
padding:80px 0;
margin-left: auto;
margin-right: auto;
 
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px;
/*opacity:1.2;*/
/*transform:translate3d(0,1000px, 0);*/
 
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition-property:all;
}

评分

欢迎为Ta评分