Build a React Image Slider Carousel from Scratch Tutorial

Learn how to build a React image slider carousel from scratch in this beginner tutorial. You will be able to navigate through the image slideshow using left and right arrows. We will use react hooks to create this project.

Timeline:
0:00 What we are building
0:41 Creating React App
2:27 Creating Project Files
3:16 Creating Slider Data
6:13 Displaying Images
13:22 Adding CSS

Access Source Code

If you want to follow me along my coding journey, be sure to subscribe :)

Additional Videos
Creating 3 different react navbars

Build React Website Using Smooth Scroll

Build a React Gatsby Travel Website

[jrqrq]

I thoroughly enjoy all your React content. your channel has helped me grow my skills and I thank you for all the free value.

[jokeyDavid]

Dude anything I search for by myself you're the first one to pop up to show me how to do it! Great contect big BIG thanks, everything looks amazing

[elvosparsley]

Thank you so much for this tutorial, exactly what I was after and as a novice React user, very straightforward and easy to follow.

[michaelariasfajardo]

Amazing the use of React State Hook's, Thank you Brian!

[許潤璋]

I recently struggled making a React app, and thanks to this tutorial video, I have learned new ways to build it.

[deepaknegi]

Thank you @Brian Design, just one ques, why did we need to use map here, can't we just render picture <img /> something like that?

[italovinicius]

Just a tip, if you want next slide you can use (currrent+1)%length and prev slide (currrent-1+length)%length

[fhkodama]

Brian, thanks for your content, man! Good stuff! :)

[AarviJain-vm]

Thank you so much for this easy way to create slider (love from India)😍😍😍😍😍😍😍

[mathanjeya]

Man You did it perfectly Thanks mate !!! Super Pumped ::)

[sohamvishwas]

Thank you. Anyone who wants to make it swipeable use the react-swipeable library.

[camillerungette]

Thank you so much for the video ! Well explained, easy to follow, it works perfectly

[eprisrichardson]

Had to render the component instead of just using component since I was using Router, but this tutorial helped a lot. Thanks!!!

[Rmgildea]

So helpful and easy to follow. Thanks!

[MsHappygirl]

Thank you so much for this! I was able to recreate this for my site in about an hour cause of this video!! I used a class component instead of react hooks!

[cbanop]

Made it so easy to understand, thank you so much!!

[paulinaalejandrasarquis]

hi! great video by the way! I was wondering how could I change this line to create a styled component for it:  
<div className={index === current ? 'slide active' : 'slide'} key={index}>
{index === current && (<Img src={slide.image} alt='travelimage'/>
)}
</div>
the div and classname are throwing me off I got the Img to work on my styled component but I can not seem to get the ease and opacity things to work at the end thank you!

[nerdwebtutorial]

Really u are the best giving nice lecture in react js .... i am requesting you to continue this series.. Thanking You i Really inspired on you

[aminmeraji]

most articles recommended just use some external component for this purpose. but here there is a simple solution! 👍

[alimkhanfthl]

Keep it like that, thanks for what you do