Create Product slider or carousel with React.js | React.js Tutorial

In the current modern world of web development there are so much features and sections to add to websites. One of those features is 'carousel'.

Sometimes you'd be asked by your client to add a carousel/product slider to their website or even you would want to add to your own projects.

building a carousel may take time and give headache during the process. Thanks to the community behind 'React JS' and 'npm' to make a beautiful and functional carousel for us.

Learn how to implement this amazing library in your projects in this video.

Timestamps:

00:00 Intro
00:30 Install react multi carousel
01:44 Import react multi carousel library
03:50 Design Product card
07:22 Create Product component
08:46 Explain responsive object
11:43 Create productData array
14:07 Map over productData array
15:20 send data through props
20:30 Add some features to carousel

________________________________

GitHub link of this project 👇:

________________________________

My GitHub 👇:

My gaming channel 👇:

My Dribbble profile 👇:

My Instagram 👇:

My Twitter 👇:

________________________________

Who is MFH (Muhammad Farzan Haydari)?

A web developer, UI/UX and graphic designer who is bachelor in computer science. I have to mention that I learned UI/UX and graphic designing all by my self (you can call me self taught UI/UX and graphic designer).

[alejogaitan]

me re sirvio, estaba renegando con el carrousel de boostrap para darle a las card las propiedades de firebase y no podia hacer que funcione correctamente, con este componente solucione mi problema! GRACIAS!

[akenjinicole]

Exactly what iv been looking for. Thank you

[hacistein]

its realy amazing work from scratch to end, easy and pure. i subs your channel. Nice to meet you realy m8^^

[undisputedlegend]

Thank you so much Bro❤. This helps me alotttt.

[mohamednabih]

thanks brother that's really very usefull for me

[sophia_mary_r]

You are a life saver! Thanks a lot for the video!

[mariangeldiazvillanueva]

You are a genious! Thank you very much for the video!

[ankitchopra]

Thanku brother it makes too much help for me ....

[Abukar_Moalim_Mokhtar]

Thanks brother, you helped me a lot❤🎉

[dhaneshsingh]

Bro I can't see anything on my web page plx help me I done same as u did by I can't see anything I added CSS file also them why plz help me

[abbbhhi]

But how to change the position of the arrow buttons.

[KyleCorpuz]

but everytime i call the class name in the css it wont take effect ( I have used tge correct path)

[anyany]

I have an issue, insert the slider it's always to the left side of the screen and when you press the arrow, the slider works but the items are too far left.

[EmonicVampire]

how to add gap between cards? i tried to put css on sliderClass and it worked but it breaks the card sliding where the last card on the right not appear fully. it appears only half of it and its already end of slide.

[sohanshet]

Your Github link does not work, where can I get this code from?

[antoninosartori]

Great video! thank you! Is there some props or way to select an current image and then move the slide ?