Swiper 横向循环焦点图实现

Swiper 配置代码

const area5Swiper = new Swiper(".area5Swiper", {
    // autoplay: true, //是否自动播放 true 是  false 否
    slidesPerView: 2, //一排展示几个
    initialSlide: 1, //进来时候展示第几个
    effect: "coverflow", //轮播图的切换效果  coverflow 3D
    centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
    spaceBetween: "-7px", //每个轮播图之间设置距离（单位px）。
    loop: true, // 是否循环播放
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    coverflowEffect: {
      rotate: 0, //slide做3d旋转时Y轴的旋转角度
      stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
      depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。
      modifier: 5, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显
      slideShadows: false, //是否开启slide阴影
    },
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: false, //修改swiper的父元素时，自动初始化swiper
    onSlideChangeEnd: function (swiper) {
      swiper.update();
      mySwiper.startAutoplay();
      mySwiper.reLoop();
    },
});

Style 样式

.area5Swiper .swiper-pagination > span {
    width: 30px;
    height: 5px;
    border-radius: 5px;
    opacity: 1;
    background-color: rgba(255,255,255,.5);
}

.area5Swiper .swiper-pagination > span.swiper-pagination-bullet-active{
    background-color: #1658ff;
}

.area5Swiper .swiper-pagination > span {
    background-color: rgba(0,0,0,.1);
}

.area5 .swiper-slide {
    background-color: #FFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 5px rgba(0,0,0,.2);
}