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

[Anonymous]

Я работаю над проектом Next.js и реализую карусель с помощью React-Slick, которая охватывает всю ширину страницы и отображает медиафайлы с разрешением 30 или 50 пикселей, в зависимости от соотношения сторон ресурса. Вот хороший пример чего-то похожего на то, чего я пытаюсь достичь.
Хотя полностью видимые ресурсы загружаются без каких-либо проблем, у меня наблюдается сдвиг макета при загрузке. Последующие изображения сначала загружаются под каруселью, а затем фиксируются в нужном положении, в результате чего карусель мерцает и смещается.
Я заметил, что установка infinite:false решает проблему. , но мне бы очень хотелось сохранить бесконечную карусель
Вот подробности моей настройки:

• Полностью видно изображения загружаются без изменения макета.
• При загрузке последующие изображения начинают загружаться под каруселью, а затем фиксируются в нужном положении, вызывая эффект мерцания.
• Я использую пользовательские компоненты изображения и видео Next, чтобы установить размер каждого элемента в зависимости от его соотношения сторон, чтобы предотвратить смещение макета. Они загружаются отложенно.

Мы будем очень признательны за любые предложения о том, как предотвратить такое смещение макета и обеспечить плавную загрузку изображений в карусели.
Спасибо!
Мой компонент карусели:
"use client";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import { ReactNode, useRef, useState } 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,
slidesToScroll: 1,
variableWidth: true,
useTransform: false,
autoplay: false,
swipe: true,
arrows: false,
accessibility: true,
swipeToSlide: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};

type ProjectCarouselProps = {
children: ReactNode;
};

export const ProjectCarousel = ({ children }: ProjectCarouselProps) => {
const ref = useRef(null);
const [cursorType, setCursorType] = useState("default");

const handleSlideClick = (
event: React.MouseEvent
) => {
if (!ref.current) return;

const slider = ref.current.innerSlider;
const slideWidth = slider?.list?.clientWidth! / 2;
const clickedPosition =
event.clientX - slider?.list?.getBoundingClientRect().left!;

if (clickedPosition < slideWidth) {
ref.current.slickPrev();
} else {
ref.current.slickNext();
}
};

const handleMouseEnter = (
event: React.MouseEvent
) => {
if (!ref.current) return;

const slider = ref.current.innerSlider;
const slideWidth = slider?.list?.clientWidth! / 2;
const hoverPosition =
event.clientX - slider?.list?.getBoundingClientRect().left!;

if (hoverPosition < slideWidth) {
setCursorType("left");
} else {
setCursorType("right");
}
};

const handleMouseLeave = () => {
setCursorType("default");
};

return (

{React.Children.map(children, (child, index) => (
key={index}
onClick={handleSlideClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={cn(styles.carouselItem, {
[styles.cursorLeft]: cursorType === "left",
[styles.cursorRight]: cursorType === "right",
[styles.cursorDefault]: cursorType === "default",
})}
>
{child}

))}

);
};


и CSS:
.projectCarousel .slick-slide {
outline: none;
align-items: flex-start;
min-width: 600px;
min-height: 600px;
}
/*this helps items start at the beginning*/
.projectCarousel {
overflow-x: hidden;
display: flex !important;
position: relative;
}
.projectCarousel .slick-slider {
display: flex !important;
}
.carouselItem {
position: relative;
width: 100%;
cursor: pointer;
}

.cursorLeft {
cursor: url("/arrow_left_icon.svg"), auto;
}

.cursorRight {
cursor: url("/arrow_right_icon.svg"), auto;
}

.cursorDefault {
cursor: default;
}



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