swiper---判斷元素在左還是在右排列

最近在做項目開發的時候，在做設計稿頁面的時候，遇到了這樣的一個效果：

 大概的意思就是：中間放大，兩邊的向中間的看齊，有一個左邊的向右傾斜，右邊的向左傾斜。這裏就需要使用到判斷swiper的元素是在做還是在右。

原本我用3.0已經寫好了，但是由於版本的差異，在4.0有一些區別。

具體參考官方文檔：

https://www.swiper.com.cn/api/parameters/191.html

代碼示例：

var swiperHonour = new Swiper('.swiper-container-honour', {
        slidesPerView: 'auto',
        spaceBetween: 0,
        centeredSlides: true,
        loop: true,
        watchSlidesProgress:true,
        pagination: {
            el: '.swiper-pagination-honour',
            clickable: true,
        },
        on:{
            progress:function(swiper,progress){
                var slide = null;
                for (i =0;i < this.slides.length; i++){
                    slide = this.slides[i];
                    this.slides.eq(i).removeClass('slideleft');
                    this.slides.eq(i).removeClass('slideright');
                    this.slides.eq(i).addClass(slide.progress > 0 ? 'slideleft' : 'slideright');
                }
            }
        }
    });

參考CSS：

.about-honour{width: 100%; margin-top: 0.75rem; padding-bottom: 50px; overflow: hidden; position: relative;}
.about-honour .swiper-slide{width: 240px; z-index: 800;}
.about-honour .swiper-slide .slide-box{width: 100%; height: 340px; overflow: hidden; transform: perspective(1000px) scale(0.8); transition: 300ms;}
.about-honour .swiper-slide .slide-box .img{width: 100%;}
.about-honour .swiper-slide.slideleft .slide-box{transform: perspective(1000px) translateX(190px) scale(0.8) rotateY(25deg);}
.about-honour .swiper-slide.slideright .slide-box{transform: perspective(1000px) translateX(-190px) scale(0.8) rotateY(-25deg);}
.about-honour .swiper-slide-active,.about-honour .swiper-slide-duplicate-active{z-index: 900;}
.about-honour .swiper-slide.swiper-slide-active .slide-box,.about-honour .swiper-slide.swiper-slide-duplicate-active .slide-box{transform: scale(1) perspective(1000px) translateX(0) rotateY(0); z-index: 10;}
.about-honour .swiper-slide.swiper-slide-prev{z-index: 850;}
.about-honour .swiper-slide.swiper-slide-next{z-index: 850;}
.about-honour .swiper-slide.swiper-slide-prev .slide-box{transform: perspective(1000px) scale(0.9) translateX(120px) rotateY(25deg);}
.about-honour .swiper-slide.swiper-slide-next .slide-box{transform: perspective(1000px) scale(0.9) translateX(-120px) rotateY(-25deg); }
.about-honour .swiper-pagination-honour{position: absolute; left: 0; bottom: 0;}

打完收工！

var swiperHonour = new Swiper('.swiper-container-honour', {slidesPerView: 'auto',spaceBetween: 0,centeredSlides: true,loop: true,watchSlidesProgress:true,pagination: {el: '.swiper-pagination-honour',clickable: true,},on:{    progress:function(swiper,progress){    var slide = null;    for (i =0;i < this.slides.length; i++){    slide = this.slides[i];    this.slides.eq(i).removeClass('slideleft');    this.slides.eq(i).removeClass('slideright');    this.slides.eq(i).addClass(slide.progress > 0 ? 'slideleft' : 'slideright');    }    }}});