Как предотвратить сдвиг макета при загрузке изображений? ⇐ CSS

[Anonymous]

Я работаю над проектом Next.js и реализую карусель, которая охватывает всю ширину страницы и показывает медиафайлы с разрешением 30 или 50 пикселей, в зависимости от соотношения сторон ресурса. Вот хороший пример чего-то похожего на то, чего я пытаюсь достичь.
Хотя полностью видимые ресурсы загружаются без каких-либо проблем, у меня наблюдается сдвиг макета при загрузке. Следующие изображения сначала загружаются под каруселью, а затем фиксируются в нужном положении, в результате чего карусель мерцает и смещается.
Вот подробности моей настройки:
< ul>
[*]Полностью видимые изображения загружаются без какого-либо смещения макета.
[*]При загрузке предстоящие изображения начинают загружаться под каруселью, а затем фиксируются в нужном положении, вызывая эффект мерцания.
[*]Я использую пользовательские компоненты изображения и видео Next, чтобы установить размер каждого элемента в зависимости от его соотношения сторон, чтобы предотвратить смещение макета. Они загружаются отложенно.

Будем очень признательны за любые предложения о том, как предотвратить такое смещение макета и обеспечить плавную загрузку изображений в карусели.
Спасибо!
Мой компонент карусели:
"use client";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { ReactNode, useRef } from "react";
import Slider, { Settings } from "react-slick";
import cn from "classnames";
import styles from "./carousel.module.css";
import React from "react";

const carouselSettings: Settings = {
infinite: true,
variableWidth: true,
autoplay: false,
swipe: true,
arrows: false,
accessibility: true,
swipeToSlide: true,
};

type ProjectCarouselProps = {
children: ReactNode;
};

export const ProjectCarousel = ({ children }: ProjectCarouselProps) => {
const sliderRef = useRef(null);

const handleSlideClick = (index: number) => {
if (sliderRef.current) {
sliderRef.current.slickGoTo(index);
}
};

return (

{React.Children.map(children, (child, index) => (
key={index}
className={cn(styles.slideshow__slide)}
onClick={() => handleSlideClick(index)}
>
{child}

))}

);
};


и CSS:
.slideshow {
display: flex;
overflow: hidden;
}

.slideshow__slide {
flex-shrink: 0;
width: 100%;
}



Подробнее здесь: https://stackoverflow.com/questions/786 ... ing-images