next.js 页面加载时样式未正确加载

我在一个next@13.4.7项目中使用keen-slider@6.8.5。当我的页面在JavaScript加载完成之前处于加载的初始状态时，我得到这个结果image before loading properly，当它的加载完成时，我得到这个结果imae after loading。我不想让用户看到像第一张图片滑块的结果。我做了一个滑块组件，这是我的代码。谁能告诉我该怎么做？
我试着改变弹性风格，但它停留在一个形象
这是我所做的代码：

"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>
  );
}

个字符

编辑：

该示例已被编辑为将第一张幻灯片显示为占位符图像，直到成功加载滑块库。编辑引入了用以下行替换先前的加载占位符：

<div className={`number-slide1 ${loaded ? 'slide-cover' : ''}`}>1</div>

字符串
如果您只需要在Keen Slider库初始化之前隐藏图像，则可以使用CSS：

// imports

export default () => {
...

  return (
    <>
      // custom loading component; removed once the slider library has been loaded
      <div className={`number-slide1 ${loaded ? 'slide-cover' : ''}`}>1</div>
      <div ref={sliderRef} className={`keen-slider ${loaded ? "" : "slide-hidden"}`}>
        <div className="keen-slider__slide number-slide1">1</div>
        <div className="keen-slider__slide number-slide2">2</div>
      </div>
    </>
  );
}

型

样式.css*

.slide-cover {
    display: none;
}
.slide-hidden {
    visibility: hidden;
}

型

next.js 页面加载时样式未正确加载

1条答案

相关问题

热门标签

最新问答