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');    }    }}});