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

Question

When you are entering the first time for the page or refreshing, the first image does not seem. However, when you click the nav buttons, after arriving at the first image, it seems.

.
.
import SimpleImageSlider from "react-simple-image-slider";
.
.
.
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> 
  </>
) ;

Can anyone help?

works for me https://codesandbox.io/s/xenodochial-napier-0nzmkz?file=/src/App.js — Nikita Skrebets, Aug 17 '22 at 12:27

score 0 · Answer 1 · answered Aug 17 '22 at 12:24

you need to write the condition before using slider:

images.length > 0

so your code may look like this

   .
.
import SimpleImageSlider from "react-simple-image-slider";
.
.
.
const images = [{ url: file0 }, { url: file1 }, { url: file2 }];
.
.
.
return(
  <>
    <section className="shadow-none p-3 mb-5 rounded d-flex justify-content-center">
    {images.length > 0 &&
            <SimpleImageSlider
               width={896}
               height={504}
               images={images}
               autoPlay
               autoPlayDelay={5}
               showBullets
               showNavs
        />
    }
      </section> 
  </>
) ;

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

1 Answers1