如何实现carousel（轮播图）首张幻灯片放大效果？

实现方案 #

你可以直接基于已经熟悉的Slick Carousel改造即可，无需切换新库，具体实现逻辑如下：

1. 关闭Slick自带的centerMode配置，通过自定义类控制首张幻灯片的放大效果
2. 初始化时给首个可见的幻灯片添加自定义放大类，写对应的缩放样式
3. 监听Slick的afterChange切换事件，每次切换完成后更新放大类的挂载节点，给当前展示序列里的第一个可见幻灯片加放大类

代码示例 #

Slick初始化及事件绑定：

$('.carousel-container').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  infinite: true,
  centerMode: false,
  // 给容器左右加内边距，避免放大后的幻灯片被裁切
  padding: '70px'
})

// 初始化时给第一个slide添加放大类
$('.carousel-container .slick-slide').eq(0).addClass('scale-active')

// 轮播切换后更新放大类
$('.carousel-container').on('afterChange', function(event, slick, currentIndex) {
  $('.carousel-container .slick-slide').removeClass('scale-active')
  $('.carousel-container .slick-slide').eq(currentIndex).addClass('scale-active')
})

对应的CSS样式：

.carousel-container .slick-slide {
  transform: scale(0.85);
  opacity: 0.6;
  transition: all 0.3s ease;
}
.carousel-container .slick-slide.scale-active {
  transform: scale(1.15);
  opacity: 1;
}

备选库推荐 #

如果不想改造Slick，也可以选择以下轮播库实现需求：

• Swiper.js：配置灵活，支持自定义激活态规则，可直接指定首个可见幻灯片为激活项，适配多端效果好
• Tiny Slider 2：轻量无依赖，支持自定义激活节点匹配逻辑，配置简单易上手

你需要的效果参考图：

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