How to make Card Slider in React JS | React Slick

[@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

[@SRIGHT0]

hero

[@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

[@ourdestruction6851]

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

[@Елена-б6в3ж]

Thank you so much! I didn't import css styles and didn't understand why it's not working. I've wasted so much time. And finally I decided to watch videos on KZbin and find yours. It was obvious! I'm grateful to you

[@fluntimes]

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

[@channelgabud8434]

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

[@MolniyaPiano]

Hello, is this possible?

[@jikamana]

Thanks you fir this video, saved me from using plain CSS

[@atifjahangir3728]

thanks Etisha Garg for helping us

[@deivideguilherme]

Awesome! Thank you so much for sharing your knowledge. Even though I don't speak or understand your language, it was easy to follow your teachings.

[@daghart7561]

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

[@rahulbaghel1680]

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

[@mtg_07]

Clean and Clear Explain loved id ;)

[@amahlenxumalo5789]

thanks a lot I have been struggling all day to implement it❤❤

[@215ariley]

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

[@salmaallali506]

you're a life saver thanks a lot

[@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

[@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.

[@ger_espinosa]

Thanks!! You helped me a lot after 3 libraries!!

[@ranajaved4489]

Thanks for you to give us an informative video about slider

[@jnuwalaengineer]

amazing explanation✨

[@arjunsemwal02]

Thanks Ms. Garg 😊

[@Goms_1804]

Loved the explanation ❤

[@a_basic_sheep_1993]

great job Etisha!

[@a_basic_sheep_1993]

do you have discord ?

[@zaddy_zayn5152]

Dhidhi you are a life saver

[@geolvz]

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.

[@NaveenKumar-bz9mz]

Great Teaching 😊

[@MohammedHusainmobikira]

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

[@nirajnarkhede7552]

Lovely explained !

[@atifjahangir3728]

I love your video! I'm going to subscribe to you for your great content.

[@philiponyeachonam6724]

Thanks a lot, was struggling with the margin issue

[@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

[@amirhosseinqafari9747]

Amazing you are the BEST!

[@Sumit-sk1ou]

Thanks alot i really wanted this video.. and the good explanation..

[@computech2408]

Colour combination is soo cool... 😍

[@TiannaCBrown]

Thanks so much for this! Your video is the only one I've found that doesn't make me download & pay for anything, and this was very quick as well. Is there a way to make the carousel move automatically without the arrows?

[@SiddhiRanpise-g5k]

Thankyou,This helped a lot! Subscribing rightaway!!

[@techaurtales]

hi can you suggest how can i load data from api....10 items at a time when user reaches 10th item loadmore runs and carousel will continue from 11th item and so on

[@lianosh_hamalka]

thank you for this video queen!

[@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

[@progaming3662]

You just get a new subscriber thank you so much

[@BeetieKay]

I love this ❤ uploaded more

[@ahmedshaban9295]

great video thank you for clear explanation

[@fatimaiqra2169]

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

[@Innopro_tech]

I loveeeee thiss!❤ thanks making it clear

[@rahulraparti11]

Worked for me!

[@nitin_1406]

Great explanation 🎉

[@techscienceskills]

Thanks very helpful.

[@GeraNuncio]

Have you had the duplicated bug issue ? I implemented this but it duplicates a card just below one of the existing ones

[@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

[@univquestknowledge8505]

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

[@ArjunBhatt-s3y]

hello, yes React Slick is good choice but if you are targeting the website performance that time I think will not help. the main problem is this will increase the dom elements so effect on the - TBT. if anyone have and other idea then please describe. BTW thank you for making this amazing Video ❤ thank you.

[@dhokiarinidh9809]

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

[@saikiran0311]

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

[@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..

[@mdwaliullah9609]

why i don't show arrow icon both side

[@DoNotType]

Sand problem

[@eves.2825]

Thanks for the help!

[@rosaaeri4639]

How can we use 1i8n language changing in carousel. Mine work only for 1 language then start showing of the previous language

[@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??

[@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

[@AdityaSoni-g6c]

Please make more videos on react js really helpful.

[@biswajitchaki2842]

your code is not working properly The responsive feature is not working.

[@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?

[@KanhaiyaSahu01]

thanks , it was quick

[@DanielOscarKantong]

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

[@LuffyTaro1977]

const settings = { accessibility: false, dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 3000, responsive: [ { breakpoint: 1440, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, dots: true, }, }, { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1, }, }, { breakpoint: 768, settings: { slidesToShow: 1, slidesToScroll: 1, }, }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, }, }, ], }; it is working good with the tailwind

[@AS-mc2db]

mam mere both sides slide waly arrow show nahi ho rhy...i dont know why i have that problem

[@duonghoang7977]

wow how can you style it by the classname ? I'm newbie

[@apurwarokade3863]

How can we change colour of the arrow bar

[@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..

[@anggagumilang212]

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

[@virajshekhar2356]

Thank you so much sister

[@SahilAppsTricksTips]

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

[@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` ); } };

[@kiranrawat5002]

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

[@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

[@KiranBadgujar-di2ki]

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

[@AkashYadav-di6kd]

Thank you, ma'am

[@excel_xoxo833]

Thank you so much.

[@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

[@biswajit52173]

the side arrow is not showing, can anybody help me

[@phlox22]

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

[@DavidMwai-dj8up]

Amazing

[@latifdhalait6328]

video on skills show progress bar.. with animation 🙏

[@marvellousadesanya8480]

Can we remove the arrows?

[@saravananperiyaswamy8681]

Is it responsive?

[@jesusre8495]

Excelente!

[@shinpaingmin603]

not showing next, prev arrows

[@VloggerBoyDeepak]

thank you mam

[@thelOlvault24]

Thank You so much

[@capnajish9745]

how to add those images?

[@razarajpoot9811]

thank you very much

[@DoNotType]

Both side arrow is not coming in my code

[@harishankerreddy631]

same problem

[@blueflaregamerz4375]

Dont you think we should know how to create on our own i was here to get idea for that but disappointed pls mention in thumnail if you are using any library maam

[@Umeed_]

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

[@oluwajobaakinpelu316]

Not that deep. Write yours!

[@tdekoekkoek]

yeah she showed you everything you need to know but you are too lazy to do anything yourself

[@Umeed_]

​@@tdekoekkoek Haha nice ..

[@tariqahmed2526]

Why u need source code this simple thing that will be just copy & paste do it ur self

[@grimreeper8008]

git gud, copypasta

[@tiarasafamarwah4688]

thanks for the tutor

[@carlosalvarez3268]

Where is the code or the repository?

[@MuriloRerison]

is it an infinity scroll?

[@AmitKumar-wp9ik]

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

[@avinashroy7896]

mine is not working...

[@nandkishorechhimpa2939]

is it responsive or not ??