Slider's first image does not seem unless you do not click the nav button while entering a page.

[hybtli]

When you are entering the first time for the page or refreshing, the first image does not seem, like the one below.

---

However, when you click the nav buttons, after arriving at the first image, it seems, like the one below.

---

Can anyone help?

const images = [{ url: file0 }, { url: file1 }, { url: file2 }];

return(
  <>
    <section className="shadow-none p-3 mb-5 rounded d-flex justify-content-center">
            <SimpleImageSlider
               width={896}
               height={504}
               images={images}
               autoPlay
               autoPlayDelay={5}
               showBullets
               showNavs
        />
      </section> 
  </>
) ;       

[marklee1972]

I encountered the same case.
Does anyone can solve this issue?

[hybtli]

First of all, sorry for the late answer. While creating three variables named file0, file1, and file2, I created like that :

  const [file0, setFile0] = useState("");
  const [file1, setFile1] = useState("");
  const [file2, setFile2] = useState("");

After doing this I solved my issue:

  const [file0, setFile0] = useState<string>("");
  const [file1, setFile1] = useState<string>("");
  const [file2, setFile2] = useState<string>("");

I hope it will also solve your issue 😊