How to Create an Image Slider in React JS in Just 8 Minutes!

hi everyone in this video we'll create a slideshow image using an in-frame package by the name of preact slideshow image in react cheese so we have now a slight effect we can change it to the fade or to the zoom one the effect has changed to the fade now see it before it was slight effect but now it is fed effect so let's get started to create this example before starting Please Subscribe our YouTube channel so I have created a file by the name of I made slide in my project and I've already created the project and this file is imported in the index page okay index.js have used that here so the first thing that we should do we will install the package that we would like to use nvmi react slide show image I have already installed this okay let's see it it is installed here uh yeah slide shoe react slideshow image okay 452 version I have already installed so after installing so let's start our Cooling so react functional component and Export it also and here I will import the package I have installed import first I will import the boots the CSS files the react slide show images slash Dash slash um this is okay the CSS file is styles dot CSS and now we will import the effect that we would like to use we have different effects in this package I will import all of the info to the first one is fate we can import fate from react slideshow image and also we can import Zoom effect and also we can import the slide we can use every one of them the one we would like we can use that so now let's write code here so now I should have my images I should import the images to import the images I will use I will import image online from this URL okay and splash so I will use this I created this object array of objects okay I have already created it we set here I will use you can import from your local computer the image is okay but I will import from these URLs and also I have added the description that the text that you would like to write on your images on the top of your image is okay this is the text and this is the URL and it is array of objects I have created so now we will use it here I will assign a class name to this that would be slide container and here I will create the effect I would like to use fade effect then I will use map function to display these images slide images in the caption slide images start map function and here I will use image and index row function and now I will return sign key to this is equal to with index let's write now that you and assign style to this I will write style for this tube here cast new style is equal to display Flex align items Center if I can 19th century right soloso pixel background size code I will use that style now here the new style and also I will add more style here the other style would be background image background like um image it's equal to I will use now the URL URL and use dollar sign for the variable image dot URL and here inside this I will write a spin tag and here I will write the caption image dot caption and also I will style this Style would be I will write the style here and span style it's equal to font size actual pixel background like [Music] and so color white and let's let's assign that spin straight and where is the error let's start the server so let's start server and frame start foreign we have this slide image sliding so let's see the changing up images that is the first slide it changed the second slide and to the third slide let me just let's see that CSS the spam style background and the color these didn't apply we should write it in this nothing card Library says let's see it now see it it has replaced um it is that the fade effect also we can change it to the slide see it it is very difficult if you would like to change it to the slide uh slide let's use the slide and now let's check it see it now it will that it will change to the slide see it the change to the slider so you can use the zoom one yeah so we have used this package okay see it react slideshow images so if you have liked the video please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 22,004

Keywords: how to make image slider in react js, react image slider, image carousel in react js, image slider in react js, create slider in react js, image slider react js, dynamic slider in react js, create image slider in react js, custom image slider in react js, automatic image slider in react, react image slider tutorial, auto image slider in react js, react, react slider, how to create a slider in html, image slider react, how to create a slider in html and css, fade, image, zoom, slider

Id: c84vuY3Eyyk

Length: 8min 59sec (539 seconds)

Published: Sat Jan 28 2023