Project 3 from 25 projects (Image Slider)

 1 component ImageSlider.

2 Take {url,limit,page} as props.

3 take 2 useStates images and currentSlides.

4 take useEffect where [url] is dependency and in it if (url !== ""(*empty*) then run the function fetchImages().

5 make one more usetstate errorMsg which is intially null.

6 create an async function fetchImages which consists of try and catch.

7 In try, a constant response awaits fetch(url, page and limit) from parent. and the other constant data equals response.json.

8 if (data) then setImages(data).

9 Make another useState loading which is initially false. Make the loading true at the start of try and again false at the end of try also make it false at catch.

10 in the parent i.e app.js, send props url, page, limit.

11 Import icons from react-icons.

12 Inside div add 2 icons of  arrows and in between them, if images are there then images.map is done inside of which img tag is written.

13 A span is made for dots at the bottom of the images. Where, if images, images.map is written with a button inside of it.

14 OnClick is added to arrows and dots with their handlers.

15 OnClick of left arrow handles in a way that if image is on 1st slide it goes to the last image else it just shows previous image

16 onClick of right arrow handles in a way that if image is on last slide it goes to the 1st slide else it just shows the next image.

17 OnClicking the dots it goes to the index that the dot is clicked.

18 Some css is used to make the display none so only the currentSlide is shown.

19 Slider works.