Swiper JS实现特殊滑块对齐：首屏左、激活居中、末屏右

用Swiper实现的方案 #

完全可以通过Swiper实现这个需求，核心是结合基础配置、自定义CSS和回调函数动态调整对齐方式：

1. 基础配置初始化
   先设置核心参数，让中间激活的幻灯片默认居中：

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1.5, // 每视图显示1.5个幻灯片
  spaceBetween: 20, // 幻灯片间距，按需调整
  centeredSlides: true, // 激活幻灯片居中
  on: {
    // 幻灯片切换时触发判断
    slideChange: function() {
      const container = this.el;
      container.classList.remove('first-slide-active', 'last-slide-active');
      
      // 第一页时左对齐
      if (this.activeIndex === 0) {
        container.classList.add('first-slide-active');
      }
      // 最后一页时右对齐（索引值根据幻灯片总数调整，示例为总数量减2）
      else if (this.activeIndex === this.slides.length - 2) {
        container.classList.add('last-slide-active');
      }
    },
    // 初始化时执行一次判断
    init: function() {
      this.emit('slideChange');
    }
  }
});

2. 自定义CSS调整对齐
   通过类名给首尾状态的滑块容器设置对齐规则：

/* 默认状态下保持居中 */
.swiper-wrapper {
  transition: justify-content 0.3s ease;
}
/* 第一页激活时左对齐 */
.swiper-container.first-slide-active .swiper-wrapper {
  justify-content: flex-start;
}
/* 最后一页激活时右对齐 */
.swiper-container.last-slide-active .swiper-wrapper {
  justify-content: flex-end;
}

注意：最后一页的索引判断需要根据实际幻灯片总数测试调整，比如4个幻灯片时，最后激活索引是2，对应slides.length - 2；如果是5个幻灯片，可能需要调整为slides.length - 2或slides.length - 1，视实际显示效果而定。

支持jQuery的替代滑块选项 #

如果更倾向于jQuery生态，这两个滑块也能实现需求：

• Owl Carousel 2：设置items: 1.5、margin: 20，利用changed.owl.carousel事件判断当前滑块位置，给容器添加对应类名，再用CSS调整对齐方式，思路和Swiper一致。
• Slick Slider：配置slidesToShow: 1.5、centerMode: true，通过afterChange事件监听切换状态，结合自定义CSS处理首尾屏的对齐逻辑。

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