如何实现Embla轮播图幻灯片的一致性缩放效果？

需求回顾 #

实现幻灯片缩放效果：越靠近轮播容器左边缘的幻灯片尺寸越大，随与左边缘的像素距离增加而缩小；要求缩放差异仅取决于像素距离，与轮播宽度、幻灯片数量无关，同时修复原示例的三个问题。

原示例问题分析 #

1. scrollSnapList() 数量不匹配：该方法返回的是轮播锚点列表，仅当单次显示一张完整幻灯片时数量与幻灯片一致，否则会导致部分幻灯片无缩放效果。
2. 依赖轮播宽度/屏幕尺寸：基于滚动进度比例计算缩放，会随容器宽度变化而改变缩放程度。
3. 依赖幻灯片数量：滚动进度的计算与总幻灯片数量绑定，数量越少缩放效果越夸张。

解决方案代码（React） #

import { useState, useEffect } from 'react';
import EmblaCarousel from 'embla-carousel-react';

// 可自定义的缩放参数
const MIN_SCALE = 0.8; // 幻灯片最小缩放比例
const SCALE_DECAY_RANGE = 300; // 从容器左边缘开始，300像素内完成从1到MIN_SCALE的衰减

const YourCarousel = () => {
  const [embla, setEmbla] = useState<EmblaCarouselType | null>(null);
  const [scaleValues, setScaleValues] = useState<number[]>([]);

  useEffect(() => {
    if (!embla) return;

    const containerNode = embla.rootNode();
    let containerRect = containerNode.getBoundingClientRect();

    const calculateSlideScales = () => {
      containerRect = containerNode.getBoundingClientRect();
      const containerLeft = containerRect.left;
      const slideNodes = embla.slideNodes();
      const slideWidth = slideNodes[0]?.getBoundingClientRect().width || 0;

      const scales = slideNodes.map((slide) => {
        const slideRect = slide.getBoundingClientRect();
        // 计算幻灯片左边缘到容器左边缘的像素距离
        let distance = slideRect.left - containerLeft;

        // 处理循环模式下的克隆幻灯片位置偏移
        if (embla.options.loop) {
          const totalSlides = slideNodes.length;
          if (distance < -slideWidth) {
            distance += totalSlides * slideWidth;
          } else if (distance > containerRect.width) {
            distance -= totalSlides * slideWidth;
          }
        }

        // 计算缩放值：距离在0~SCALE_DECAY_RANGE之间时线性衰减，超出后保持最小缩放
        const normalizedDistance = Math.max(0, Math.min(distance, SCALE_DECAY_RANGE));
        const scale = 1 - (normalizedDistance / SCALE_DECAY_RANGE) * (1 - MIN_SCALE);
        return Math.max(scale, MIN_SCALE);
      });

      setScaleValues(scales);
    };

    // 初始化计算+绑定事件
    calculateSlideScales();
    const syncScroll = () => calculateSlideScales();
    embla.on('scroll', syncScroll);
    embla.on('reInit', calculateSlideScales);
    window.addEventListener('resize', calculateSlideScales);

    // 清理事件监听
    return () => {
      embla.off('scroll', syncScroll);
      embla.off('reInit', calculateSlideScales);
      window.removeEventListener('resize', calculateSlideScales);
    };
  }, [embla]);

  return (
    <EmblaCarousel
      options={{ loop: true }} // 根据需求开启/关闭循环
      onRef={setEmbla}
    >
      <div className="embla__container">
        {yourSlidesData.map((slide, index) => (
          <div
            key={index}
            className="embla__slide"
            style={{ transform: `scale(${scaleValues[index] || 1})` }}
          >
            {/* 幻灯片内容 */}
          </div>
        ))}
      </div>
    </EmblaCarousel>
  );
};

export default YourCarousel;

方案优势 #

1. 全幻灯片覆盖：直接遍历slideNodes()获取所有幻灯片，无论轮播显示模式如何，所有幻灯片都能获得缩放效果。
2. 像素距离驱动：基于幻灯片与容器左边缘的实际像素距离计算缩放，完全脱离轮播宽度、屏幕尺寸的影响。
3. 与幻灯片数量无关：缩放逻辑仅依赖距离参数，无论幻灯片数量多少，相同距离的幻灯片缩放效果一致。

自定义调整 #

• 修改MIN_SCALE控制最小缩放比例（比如设为0.7会让远处的幻灯片更小）。
• 修改SCALE_DECAY_RANGE控制缩放衰减的像素范围（比如设为400会让缩放变化更平缓）。

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