我在一个next@13.4.7项目中使用keen-slider@6.8.5.当我的页面在加载的初始状态下加载时，在javascript加载完成之前，我得到这个结果image before loading properly，当它加载完成时，我得到这个结果，它是好的imae after loading.
我不想让用户看到像第一张图片一样的滑块结果.我已经为滑块做了一个组件，这是我的代码.有人能告诉我该怎么做吗？
我试着改变FLEX风格，但它停留在一个图像上
这是我所做的事情的代码:
"use client";
import Image from "next/image";
import "./styles.css";
import "keen-slider/keen-slider.min.css";
import KeenSlider from "keen-slider";
import { useKeenSlider } from "keen-slider/react";
import React, { useRef, useState } from "react";
export default function Home() {
const [currentSlide, setCurrentSlide] = useState(0);
const [loaded, setLoaded] = useState(false);
const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
initial: 0,
slideChanged(slider) {
setCurrentSlide(slider.track.details.rel);
},
created() {
setLoaded(true);
},
});
return (
<>
<div className="navigation-wrapper">
<div ref={sliderRef} className="keen-slider">
<div className="keen-slider__slide number-slide1">1</div>
<div className="keen-slider__slide number-slide2">2</div>
<div className="keen-slider__slide number-slide3">3</div>
<div className="keen-slider__slide number-slide4">4</div>
<div className="keen-slider__slide number-slide5">5</div>
<div className="keen-slider__slide number-slide6">6</div>
</div>
{loaded && instanceRef.current && (
<>
<Arrow
left
onClick={(e: any) =>
e.stopPropagation() || instanceRef.current?.prev()
}
disabled={currentSlide === 0}
/>
<Arrow
onClick={(e: any) =>
e.stopPropagation() || instanceRef.current?.next()
}
disabled={
currentSlide ===
instanceRef.current.track.details.slides.length - 1
}
/>
</>
)}
</div>
{loaded && instanceRef.current && (
<div className="dots">
{[
...Array(instanceRef.current.track.details.slides.length).keys(),
].map((idx) => {
return (
<button
key={idx}
onClick={() => {
instanceRef.current?.moveToIdx(idx);
}}
className={"dot" + (currentSlide === idx ? " active" : "")}
></button>
);
})}
</div>
)}
</>
);
}
function Arrow(props: {
disabled: boolean;
left?: boolean;
onClick: (e: any) => void;
}) {
const disabeld = props.disabled ? " arrow--disabled" : "";
return (
<svg
onClick={props.onClick}
className={`arrow ${
props.left ? "arrow--left" : "arrow--right"
} ${disabeld}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
{props.left && (
<path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
)}
{!props.left && (
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
)}
</svg>
);
}[class^="number-slide"],
[class*=" number-slide"] {
background: grey;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
color: #fff;
font-weight: 500;
height: 300px;
max-height: 100vh;
}
.number-slide1 {
background: rgb(64, 175, 255);
background: linear-gradient(
128deg,
rgba(64, 175, 255, 1) 0%,
rgba(63, 97, 255, 1) 100%
);
}
.number-slide2 {
background: rgb(255, 75, 64);
background: linear-gradient(
128deg,
rgba(255, 154, 63, 1) 0%,
rgba(255, 75, 64, 1) 100%
);
}
.number-slide3 {
background: rgb(182, 255, 64);
background: linear-gradient(
128deg,
rgba(182, 255, 64, 1) 0%,
rgba(63, 255, 71, 1) 100%
);
background: linear-gradient(
128deg,
rgba(189, 255, 83, 1) 0%,
rgba(43, 250, 82, 1) 100%
);
}
.number-slide4 {
background: rgb(64, 255, 242);
background: linear-gradient(
128deg,
rgba(64, 255, 242, 1) 0%,
rgba(63, 188, 255, 1) 100%
);
}
.number-slide5 {
background: rgb(255, 64, 156);
background: linear-gradient(
128deg,
rgba(255, 64, 156, 1) 0%,
rgba(255, 63, 63, 1) 100%
);
}
.number-slide6 {
background: rgb(64, 76, 255);
background: linear-gradient(
128deg,
rgba(64, 76, 255, 1) 0%,
rgba(174, 63, 255, 1) 100%
);
}
.navigation-wrapper {
position: relative;
}
.dots {
display: flex;
padding: 10px 0;
justify-content: center;
}
.dot {
border: none;
width: 10px;
height: 10px;
background: #c5c5c5;
border-radius: 50%;
margin: 0 5px;
padding: 5px;
cursor: pointer;
}
.dot:focus {
outline: none;
}
.dot.active {
background: #000;
}
.arrow {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
fill: #fff;
cursor: pointer;
}
.arrow--left {
left: 5px;
}
.arrow--right {
left: auto;
right: 5px;
}
.arrow--disabled {
fill: rgba(255, 255, 255, 0.5);
}