加载导航箭头和点时反应embla轮播出错

Question

我有一个配备embla的轮播，在我的网站第一次加载时，它没有向我显示导航箭头（左和右）和底部的点（它只向我显示一个，而不是应有的数量）因为图像数量）。重新加载时，所有内容都显示正确

我不知道这是否是图像加载方式的问题，这是正确完成的，因为通过使用鼠标移动我可以导航轮播。

export const CarouselPropiedad = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel();
  const [canNext, setCanNext] = useState(false); // Cambiado a false inicialmente
  const [canPrev, setCanPrev] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [scrollSnaps, setScrollSnaps] = useState([]);
  const [images, setImages] = useState([]);

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev();
  }, [emblaApi]);

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext();
  }, [emblaApi]);

  const onSelect = useCallback(() => {
    if (!emblaApi) return;
    setSelectedIndex(emblaApi.selectedScrollSnap());
    setCanPrev(emblaApi.canScrollPrev());
    setCanNext(emblaApi.canScrollNext());
  }, [emblaApi]);

  // Método para cargar dinámicamente las imágenes
  const loadImages = async () => {
    const importedImages = [];
    for (let i = 1; i <= 5; i++) {
      const image = await import(`../assets/torre-promenade/torre-promenade-${i}.jpg`);
      importedImages.push(image.default);
    }
    setImages(importedImages);
  };

  useEffect(() => {
    loadImages();
  }, []);

  useEffect(() => {
    if (emblaApi && images.length > 0) {
      emblaApi.reInit(); // Reinicializar Embla Carousel después de cargar las imágenes
      emblaApi.on("select", onSelect); // Establecer el evento select después de reinicializar
      onSelect(); // Llamar a onSelect inicialmente para establecer canPrev y canNext
      setScrollSnaps(emblaApi.scrollSnapList()); // Establecer los puntos de navegación
    }
  }, [emblaApi, images, onSelect]);

  return (
    <div className="embla rounded max-w-lg">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          {images.map((src, index) => (
            <div key={index} className="embla__slide">
              <img
                src={src}
                alt={`torre-promenade-${index + 1}`}
                className="w-max h-max aspect-square"
              />
            </div>
          ))}
        </div>
      </div>
      <div className="flex items-center justify-center gap-2 embla_dots_container z-10">
        {scrollSnaps.map((_, index) => (
          <DotButton
            key={index}
            selected={index === selectedIndex}
            onClick={() => emblaApi && emblaApi.scrollTo(index)} // Scroll to index
          />
        ))}
      </div>
      <button
        className="embla__button embla__button--prev disabled:hidden"
        onClick={scrollPrev}
        disabled={!canPrev}
      >
        <ChevronLeft />
      </button>
      <button
        className="embla__button embla__button--next disabled:hidden"
        onClick={scrollNext}
        disabled={!canNext}
      >
        <ChevronRight />
      </button>
    </div>
  );
};

我尝试使用另一个轮播，如果它工作正常，只需替换代码，但它会出现相同的错误。 我还尝试使用“加载”，以便仅在图像上传完成时显示轮播，以防出现问题，但它也不起作用

Answer 1

您没有指定您使用的 Embla Carousel 版本，但假设您使用的是

v8

及更高版本，当添加或删除幻灯片时，Embla 会自动拾取并重新初始化。您应该能够通过添加

reInit

事件侦听器并将轮播初始化代码更改为以下内容来解决问题：

  useEffect(() => {
    if (!emblaApi) return

    const updateScrollSnaps = (emblaApi) => setScrollSnaps(emblaApi.scrollSnapList());

    emblaApi
      .on("select", onSelect)
      .on("reInit", onSelect); // Run onSelect on reInit
      .on("reInit", updateScrollSnaps); // Update scrollSnaps on reInit 

    onSelect();
    updateScrollSnaps();
  }, [emblaApi]);