我有一个配备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>
);
};
我尝试使用另一个轮播,如果它工作正常,只需替换代码,但它会出现相同的错误。 我还尝试使用“加载”,以便仅在图像上传完成时显示轮播,以防出现问题,但它也不起作用
您没有指定您使用的 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]);