Create Product slider or carousel with React.js | React.js Tutorial
HTML-код
- Опубликовано: 21 окт 2022
- 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
18:23 Create data.js
20:30 Add some features to carousel
________________________________
GitHub link of this project 👇:
github.com/MuhammadFRZN/react...
________________________________
My GitHub 👇:
github.com/MuhammadFRZN
My gaming channel 👇:
ruclips.net/channel/UCRoM...
My Dribbble profile 👇:
dribbble.com/MuhammadFRZN
My Instagram 👇:
muhammadfar...
My Twitter 👇:
frzn_hydari
________________________________
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).
You are a life saver! Thanks a lot for the video!
Glad to hear that 🙂 keep supporting please
Exactly what iv been looking for. Thank you
Your welcome 🙏 keep supporting please
You are a genious! Thank you very much for the video!
Glad you liked it. Please don’t forget to keep supporting 😊
it was GREAT , thank you
You’re most welcome 🙏 please keep supporting 😊
Great Video.......................................................................................
Thank you so much 😊 please don’t forget to subscribe
Thank you! This help me a lot.
You’re most welcome 😊 keep supporting please 🙏
its realy amazing work from scratch to end, easy and pure. i subs your channel. Nice to meet you realy m8^^
Thanks a lot. Keep supporting please 🙏
Great video thanks very much
Thanks brother, you helped me a lot❤🎉
You’re most welcome 🙏 keep supporting please
Great tutorial. Very Useful
Thanks a lot. Keep supporting please 🙏
Thank you.
Thank you! Really helpfull!
Thank you so much 😊. Please keep supporting 🙏
Thankyou Sir .. Love from INDIA
You’re most welcome ☺️ keep supporting please 🙏
Geniooooo, 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!
Glad to know that. Don’t forget to subscribe please 🙏
best slider video in whole utub
Thank you very much 🙏
Please keep supporting
Thank you
superb
Thankyou, super helpful
Welcome 🙏 keep up your good supports please
👍 thank you sir
You’re most welcome 🙏 please keep supporting
Thank you so much Bro❤. This helps me alotttt.
I’m really happy to know it helped. Thank you for your appreciation. Don’t forget to subscribe please
@@mfhcodinganddesign Sure
@undisputedlegend7568 thank you very much. I really appreciate it 🙏
Great video. keep it up
thanks a lot. 🙏
Thanku brother ..... it makes too much help for me ....
You’re welcome welcome, keep supporting please ✌️😊
thank you sir!
You’re most welcome 🙏
wowww best
Thank you so much 😊 please keep supporting 🙏
thanks brother that's really very usefull for me
Thank you so much for complement 😊. Keep supporting please 🙏
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.
You may take a look at the “responsive” object.
There you can set amount of cards related to viewports (mobile, tablet, desktop, super large desktop) measuring by pixels.
@@mfhcodinganddesign yeah checked. Doesn't mattet how many cards i showed if i add gap the result is the same. i also have tried adding padding right to the card instead of gap on the slider. it works but the result not good enough. Also i've tried modify it directly on the rect multi carousel but its not working.
Great video! thank you! Is there some props or way to select an current image and then move the slide ?
I’m really sorry but I couldn’t get it
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
I'm sure you missed somewhere. If you would provide me the error message in case if you are receiving one, then I'd be able to help 🙂
@@mfhcodinganddesign I too cant see anything, I have installed react-multi-carousel just as u have shown, but its displaying me nothing on the web page
@@rajitdutta9837 Gotta do width with some value and height: full in a div parent
Very helpful video
Thank you so much 😊
Thanks.. 👍🏾
Welcome 🙏 Please keep supporting 😊
thanks bro its helps a lot ....😊😊😊😊
You’re most welcome 🙏 and thank you for your supports
@@mfhcodinganddesign i need one help bro when i scrolling the page the react-carosel left and right arrow is coming to navbar ..... plz bro can you help me
Increase z-index of your navbar to bring your navbar in front of carousel buttons
thanks
You’re most welcome 😊 please don’t forget to subscribe 🙏
Hi buddy thanks a lot. This video really helped me. Could you also please share the CSS for this corresponding video
I’m really glad to hear that. I’m looking forward to create some awesome videos including CSS so please keep supporting 🙏
Hello! Is it possible to edit the buttons that are used to pass the carousel items?
Yes. Take a look at the documentation on the website shown in the video
@@mfhcodinganddesign I read it but I couldn't understand it very well, I just needed to change the background color of the buttons, leave something like black for example, is that possible?
It’s not that difficult, if you take a look at the documentation once again in the custom arrows section, you only have to copy the code and then return your custom button after “return” keyword
@@mfhcodinganddesign Hey, Muhhamad, I did it!! Thank youuuu!
@@JoaoPedro-kp7zd you’re most welcome. And please keep supporting 🙏
but everytime i call the class name in the css it wont take effect ( I have used tge correct path)
does your CSS style your pages at all or not? if not, then there is a problem importing your CSS file or linking your CSS file into your "index.html"
God bless you
Thank you so much
Your Github link does not work, where can I get this code from?
This is the link in case the link in the description doesn’t work. Don’t forget to subscribe please
github.com/MuhammadFRZN/react-multi-carousel
@@mfhcodinganddesign Thanks, bro! I really appreciate the quick response.😊
You’re most welcome 😊
Thanks brotha, Hare krishna
welcome. keep supporting ✌
what if i've to use pictures from local system?
Add your pictures to public folder then easily include their location into your carousel
I want to create it without use any library make a video plz
That’s a good idea, but if you’re trying to accomplish a project, using a library is a very good option. But I’ll try to make another video to make it without any libraries. So please subscribe to my channel to be updated of the contents.
Why don't you make a data file and just export it, you don't have to pass any props
i need to decrease the z index of carousal arrow please someone help me ........
Well, I recommend you to not try to change the z-index of the arrows but instead, increase z-index of your other elements (drop-down menu, navbar...)
Problem is iam using autocomplete map package in that that also 1000 z index that's the probelm😢
@aathiqahamed7479 and what exactly is “autocomplete map package” ?
Eski css kaha pe hai?
You can add your own styling. Although you can download the entire project files from GitHub
github.com/MuhammadFRZN/react-multi-carousel
🌟 𝓹𝓻𝓸𝓶𝓸𝓼𝓶
Keep up the supports. Thanks