如何将Swiper幻灯片环形排列并在中间两幻灯片间留空？

一、基于现有SwiperJS配置修改实现 #

1. 调整容器层级与Logo定位 #

给Swiper容器设置相对定位，将公司Logo用绝对定位固定在容器中心，通过z-index确保Logo显示在幻灯片上层：

.swiper-container {
  position: relative;
  /* 保留原有容器样式 */
}
.company-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 100px; /* 根据需求调整尺寸 */
  height: 100px;
}

2. 自定义环形排列的位移逻辑 #

利用Swiper的creative效果或自定义进度钩子，调整幻灯片的旋转和位移参数，让它们围绕中心Logo排列，同时在中间两个幻灯片之间留出Logo空间：

const swiper = new Swiper('.swiper', {
  effect: 'creative',
  loop: true,
  creativeEffect: {
    prev: {
      rotate: -110,
      translate: ['-160%', 0, -400],
    },
    next: {
      rotate: 110,
      translate: ['160%', 0, -400],
    },
  },
  on: {
    progress() {
      this.slides.forEach((slide, index) => {
        const progress = slide.progress;
        // 基础环形旋转与位移
        let rotate = progress * 110;
        let translateX = progress * 320;
        // 给中间相邻的幻灯片额外调整位移，避开Logo区域
        if (index === this.activeIndex || index === (this.activeIndex + 1) % this.slides.length) {
          translateX += progress > 0 ? 60 : -60;
        }
        slide.style.transform = `rotateY(${rotate}deg) translateX(${translateX}px)`;
      });
    },
  },
  // 保留原有配置（如slidesPerView等）
});

3. 优化初始激活位置 #

设置initialSlide为总幻灯片数的中间值，确保初始状态下中间两个幻灯片的间隙正好对准中心Logo。

二、替代插件方案 #

如果Swiper自定义调试成本过高，可选择以下更适配环形轮播的插件：

• Flickity：支持高度自定义的单元格布局，配合CSS 3D变换可快速实现环形环绕效果，中心Logo通过绝对定位叠加即可。
• Slick Carousel：结合自定义CSS动画和3D变换属性，能实现轻量化的环形排列效果，适合对体积有要求的场景。
• 纯CSS环形轮播组件：部分开源的纯CSS方案直接支持中心元素插入，无需复杂JS逻辑，仅需调整参数即可适配需求。

内容的提问来源于stack exchange，提问作者user677117