实现异形（拱形）轮播图

项目需要实现如上图所示的轮播图。
实现思路：
1.项目引入使用普通轮播图。
2.根据轮播图个数，动态给可视范围的第一个轮播图和最后一个轮播图添加样式。
代码实现：
经调研，使用slick轮播图（官网地址  https://kenwheeler.github.io/slick/）
1.点击下载插件包

将其放到staic文件夹下，在vue项目中，index.html文件中引入js和css。

注意：还需要额外引入jquery。
2.页面使用。
html：

<div id="autoplayClass1">
     <div :class="['slideItemWrapper', 'slideItemWrapper'+index , 'slideItemWrapperCenter']" v-for="(item,index) in lunbo1List"  :key="index"   :title="item.fileName"><img :src="hAction + item.filePath" class="inage  inagex" /></div>
 </div>

lunbo1List为后端返回的图片列表。
js：

 autoPlaySlide(){
 //slideItemWrapperFirst为第一个轮播图的样式，slideItemWrapperLast为最后一个轮播图的样式。
 //slideItemWrapperCenter为默认轮播图样式
      $(".slideItemWrapper0").addClass('slideItemWrapperFirst')
      $(".slideItemWrapper4").addClass('slideItemWrapperLast')
 //轮播设置
       $('#autoplayClass1').slick({
                slidesToShow: 5,    
                slidesToScroll: 1,  //每次轮播个数
                autoplay: true,
                autoplaySpeed: 2000,
      });
 //轮播change时，样式动态添加      
      $('#autoplayClass1').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                $('.slideItemWrapper' + nextSlide).removeClass('slideItemWrapperCenter')
                $('.slideItemWrapper' + nextSlide).addClass('slideItemWrapperFirst')
                let lastRotate = nextSlide + 4
                if (lastRotate > lunboList.length-1) {
                    lastRotate = lastRotate - lunboList.length
                }
                 $('.slideItemWrapper' + lastRotate).removeClass('slideItemWrapperCenter')
                $(".slideItemWrapper" + lastRotate).addClass('slideItemWrapperLast')


                $(".slideItemWrapper" + currentSlide).removeClass('slideItemWrapperFirst')
                 $('.slideItemWrapper' + currentSlide).addClass('slideItemWrapperCenter')
                let lastRotatel = currentSlide + 4
                if (lastRotatel > lunboList.length-1) {
                    lastRotatel = lastRotatel - lunboList.length
                }
                $(".slideItemWrapper" + lastRotatel).removeClass('slideItemWrapperLast')
                $('.slideItemWrapper' + lastRotatel).addClass('slideItemWrapperCenter')
           
            });
        },

css：实现异性样式

   //最左侧图片形状处理
        .slideItemWrapperFirst {
            position: relative;
            width: 17vw;
            /* 或你需要的宽度 */
            height: 20vh;
            /* 或你需要的高度 */
            display: inline-block;
        }

        .slideItemWrapperFirst::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            //   background: white; /* 这是图片背景色，根据实际情况调整 */
            z-index: 1;
        }

        .slideItemWrapperFirst img {
            width: 14.6;
            height: 15.5vh;
            position: relative;
            z-index: 2;
        }

        .slideItemWrapperFirst img {
            clip-path: polygon(0 0, calc(100%) 0, calc(100%) calc(100% - 3.5vh), 0 calc(100%));
            /* 10px 是缺失角的宽度，根据需求调整 */
        }

//最右侧图片形状处理
        .slideItemWrapperLast {
            position: relative;
            width: 17vw;
            height: 20vh;
            display: inline-block;
        }

        .slideItemWrapperLast::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            //   background: white; /* 这是图片背景色，根据实际情况调整 */
            z-index: 1;
        }

        .slideItemWrapperLast img {
            width: 14.6;
            height: 15.5vh;
            position: relative;
            z-index: 2;
        }
        //关键代码clip-path:：
        .slideItemWrapperLast img {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3.5vh));
            /* 10px 是缺失角的宽度，根据需求调整 */
        }

如何页面有多个轮播图同时使用，需要销毁的话：
 $('#autoplayClass1').slick('unslick')