How to make Card Slider in React JS | React Slick

Join the Community → www.jsanytime.com/community/
Learn how to create a stunning Image Slider or Carousel in ReactJS effortlessly with the help of React Slick! In this step-by-step tutorial, I'll guide you through the entire process, making it super easy for beginners and experienced developers alike.
By the end of this tutorial, you'll have a beautiful image slider that you can easily integrate into your web projects to showcase images, products, or content in a visually appealing way.
How to Setup Tailwind CSS in React JS?
Watch: • How to Setup Tailwind ...
#carousel #imageslider #reactjs #webdevelopment
=========================================
► Follow on Github to get latest source code of projects: github.com/EtishaGarg
► For more content like this, subscribe to my channel: / etishagarg
► Support me to make more such videos
Patreon: / etishagarg
► Follow Me On Social Media
LinkedIn: / etisha-garg
Twitter: / gargetisha
Instagram: / gargetisha
► For business inquiries, reach us on: [e-mail]

[@fluntimes]

This was really helpful. I struggled with a few other libraries/tutorials but this one hit the mark and swiftly too! Great work :)

[@daghart7561]

Thank you for sharing your process. Thank you for your clean and clear explanation ☺️

[@ourdestruction6851]

i love love love your voice and accent! a pleasure to hear honestly

[@MohammedHusainmobikira]

WOW! really you made it very easy... Thank you so much.

[@rahulbaghel1680]

Dam this is what iam looking for straight and to the point.. 😊

[@mtg_07]

Clean and Clear Explain loved id ;)

[@215ariley]

so helpful, thank you! Also, i love the way you pronounce carousel

[@lianosh_hamalka]

thank you for this video queen!

[@Innopro_tech]

I loveeeee thiss!❤ thanks making it clear

[@fatimaiqra2169]

thanks a lot, u=your video is really time saving

[@amirhosseinqafari9747]

Amazing you are the BEST!

[@eves.2825]

Thanks for the help!

[@computech2408]

Colour combination is soo cool... 😍

[@SiddhiRanpise-g5k]

Thankyou,This helped a lot! Subscribing rightaway!!

[@ahmedshaban9295]

great video thank you for clear explanation

[@dhokiarinidh9809]

Thank you so much... You really make work easy

[@philiponyeachonam6724]

Thanks a lot, was struggling with the margin issue

[@progaming3662]

You just get a new subscriber thank you so much

[@nitin_1406]

Great explanation 🎉

[@zaddy_zayn5152]

Dhidhi you are a life saver

[@nikolozmacharashvili1212]

great job Etisha!

[@nikolozmacharashvili1212]

do you have discord ?

[@Bigi352]

Thank you for sharing😭😭😭, God Bless you greatly & increase you,I have been battling with this for like 2 days now until I decided to search YT and found your video where u used react.

[@excel_xoxo833]

Thank you so much.

[@virajshekhar2356]

Thank you so much sister

[@razarajpoot9811]

thank you very much

[@Labastidaa]

Nice video, something I did was adding a className (using tailwind in my case) to the Slider, using grid make it easier to work with responsive card slider.

[@channelgabud8434]

Hello, can you give me a way to customize the previous button and next button according to what we want?

[@ryostyles9904]

Thanks. To make it responsive use: const settings = { accessibility:true, dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] };

[@ShivaGurung-kl5jj]

Thank you 🙏🏼

[@muhammaduzairrajput9810]

but this is showing half on slide, and half of another slide. How to resolve it?

[@muhammaduzairrajput9810]

Yeah, it is working, I was giving extra margin to slides

[@historyofislam2355]

Thank You so much

[@KhoaHo-jh9yz]

thank you

[@BenHurCarvalhoCarneiro]

Hello everyone, I noticed that many are having difficulty editing the arrows. I also had this difficulty. to edit, put .slick-prev:before, .slick-next:before {} in the CSS and have fun

[@adediranadedoyin528]

Thank you

[@techmasala821]

helpful video .

[@univquestknowledge8505]

I take almost one month to create slider,but this one is very easy

[@tiarasafamarwah4688]

thanks for the tutor

[@user-bx9qe3hh5c]

Please make more videos on react js really helpful.

[@DavidMwai-dj8up]

Amazing

[@AjayKumar-gu2gr]

Thanks so much mam

[@jesusre8495]

Excelente!

[@carlosloqueando904]

gracias

[@amineadoul]

hi i would like to know why the carosel is not displayed, i think the error comes from my css code but i couldn't fix it

[@carlosalvarez3268]

Hello i have a question, i try to change the design of the bottoms or well the ArowIcons but i dont have a good result with this, Did you know how to change the design of the bottoms?

[@kiranrawat5002]

didi how to create a previous file i m not able to see in description link there was not explanation of that

[@AbdulafeezAbdulazeez]

What if i want to use it on mobile view while on the desktop view there shouldn't be a slider how do i do that please

[@husnamert477]

I really like your video and I wanna add ; I m trying over hour but I couldnt find how can increase arrow size...Its very small I write some CSS codes but then its crashes

[@mdwaliullah9609]

thanks

[@apurwarokade3863]

How can we change colour of the arrow bar

[@nehalsalunke30]

Hello please please reply me as soon as possible I followed each and every step in this video and at the end the arrows was not there. Only I am able to scroll through dots. Please tell me if there possibly mistake I made during this process.. And also I have not used tailwind classes to some elements. Instead I used external css. But its all working fine.. just want to know that how to display that arrows..

[@AmitKumar-wp9ik]

hey Di please make more videos on React JS like this 😊

[@DanielOscarKantong]

how do i change the button color mrs.etisha??

[@SahilAppsTricksTips]

Can u please make another video on how to reuse the same carousel component with other images and text please ....

[@saikiran0311]

please could you explain in details about in the public folder in the students details

[@marvellousadesanya8480]

Can we remove the arrows?

[@sudarshanpatekar5632]

Well the slider looks really good, but for me the cards just take up the whole screen width, but even I want it in the center and also I am not able to see the left arrow, its almost like its not there

[@mensagensdevidaeesperanca9965]

is it an infinity scroll?

[@phlox22]

anyone can tell me how can i change the navigation dots at the bottom color to white?

[@capnajish9745]

how to add those images?

[@biswajit52173]

the side arrow is not showing, can anybody help me

[@shinpaingmin603]

not showing next, prev arrows

[@wizard9910]

How can i customize the navigation arrow, like increasing it's size. Also can you show us how to customize the pagination Bullet

[@husnamert477]

yes yes I want to learn this because I m trying over hour but I couldnt find how can increase arrow size...Its very small I write some CSS codes but then its crashes

[@anggagumilang212]

Why doesn't the slider work if the data comes from API?

[@KiranBadgujar-di2ki]

For mobile how it was going to look please one video on that please Mam

[@nandkishorechhimpa2939]

is it responsive or not ??

[@carlosalvarez3268]

Where is the code or the repository?

[@DEBUGENTITY]

My flex properties are replaced by display inline-block when i warp in .. But in your case its working how?

[@sanasajid2681]

Do you want solution of it

[@DEBUGENTITY]

@@sanasajid2681 no its solved now..

[@user-ud8bv6zc9l]

❤❤❤

[@avinashroy7896]

mine is not working...

[@sahilbasnet1360]

Great content, butI have a question, What if i want to show only one slider component instead of 3....

[@EtishaGarg]

Simply specify slidesToShow: 1

[@mdwaliullah9609]

why i don't show arrow icon both side

[@virat-od4gv]

Sand problem

[@virajshekhar2356]

awsm bahen

[@felipeandreas3224]

Error: Super expression must either be null or a function What is the reason for this error?

[@shirishasiri2124]

yes its happening for me also i don't know wt to do.. would any one can help out??

[@BudetSvobodnoy]

I didn't like this settings because you always have to choose how many items to scroll at a time. I found this setting in their docs for really infinite scroll: const settings = { className: "center", infinite: true, centerPadding: "60px", slidesToShow: 5, swipeToSlide: true, afterChange: function(index) { console.log( `Slider Changed to: ${index + 1}, background: #222; color: #bada55` ); } };

[@DProgram-xb9pp]

Thank you so much, I have wasted 36 hour in it ,I hope, the code in this tutorial will work .

[@DProgram-xb9pp]

Tried, slick , spring, swiper, ..... None of them gave me proper result

[@19vaibhavtiwari55]

how to make a carousel from scratch???

[@saichanderkasthuri600]

responsive is not working for different devices

[@virat-od4gv]

Both side arrow is not coming in my code

[@harishankerreddy631]

same problem

[@wizard9910]

Why is the pagination dot not showing up?

[@EtishaGarg]

It's there but since the background color is almost the same color as dots, you are not able to see it. Try changing the background color like white and see the dots. Also, in case you want to change the dot colors use this code snippet in your css:- .slick-dots li.slick-active button:before { color:orange !important; }

[@hiteshprajapati943]

Mam ek video API K Par bhi bnaayge ? ...

[@Umeed_]

no link to the source no direct link to the git .. just waste of time

[@P7P07]

hello mam please class link how first time see this class please mam reply and tell me

[@abhisekasylum8999]

it is not working

[@FaizanKhan-gfaizank]

Your content is nice, you should also show the mobile responsive version.

[@ProgrammingMaster-Rimon]

Yeah, I agree with you. I also need responsive version

[@bhanuprakash1863]

How do I change arrows color...?

[@sachinwebDev]

Just change backgrounds color in style of next or prev arrow component.

[@avinashroy7896]

plz help

[@kiranrawat5002]

didi can you provide source code ??

[@EtishaGarg]

Here it is : github.com/EtishaGarg/reviews-carousel

[@kiranrawat5002]

thank you so much ☺@@EtishaGarg

[@sandhyalondhe5305]

Hiii..

[@abhishekupadhyay1316]

u r cute coder ....just rename ur channel

[@playersdreams6496]

sory but half o this video is bool..... why you do not make content more specific and target from his name???

[@tahaahmadi7446]

hindi accent...; i couldn't watch more than 2 minutes

[@op_arceusfreefire989]

The you have psychological problem🙄🙄 consult your psychologist

[@sanketsingh5555]

Nobody cares

[@user-pm6ki5tm5u]

😂😂😂wahi ...​@@sanketsingh5555

[@sanowo]

But you have time to comment ? Ok good allright hunhun we got it

[@stelena-forever]

Cry more😂😂 nobody cares about your shit.