How to make Card Slider in React JS | React Slick
Вставка
- Опубліковано 15 вер 2024
- Join the Community → www.jsanytime....
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/Eti...
► 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: gargetisha@gmail.com
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 UA-cam and find yours. It was obvious! I'm grateful to you
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
}
}
]
};
Thank you 🙏🏼
but this is showing half on slide, and half of another slide. How to resolve it?
Yeah, it is working, I was giving extra margin to slides
This was really helpful. I struggled with a few other libraries/tutorials but this one hit the mark and swiftly too! Great work :)
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
Thank you
Thanks you fir this video, saved me from using plain CSS
amazing explanation✨
Clean and Clear Explain loved id ;)
so helpful, thank you! Also, i love the way you pronounce carousel
Thank you for sharing your process. Thank you for your clean and clear explanation ☺️
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.
Hello, can you give me a way to customize the previous button and next button according to what we want?
Hello, is this possible?
Dam this is what iam looking for straight and to the point.. 😊
i love love love your voice and accent! a pleasure to hear honestly
Worked for me!
Thanks!! You helped me a lot after 3 libraries!!
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.
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.
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?
WOW! really you made it very easy... Thank you so much.
Lovely explained !
Thanks alot i really wanted this video.. and the good explanation..
Loved the explanation ❤
How can i customize the navigation arrow, like increasing it's size. Also can you show us how to customize the pagination Bullet
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
Thanks a lot, was struggling with the margin issue
Thankyou,This helped a lot! Subscribing rightaway!!
Error: Super expression must either be null or a function What is the reason for this error?
yes its happening for me also i don't know wt to do.. would any one can help out??
thank you for this video queen!
Colour combination is soo cool... 😍
Amazing you are the BEST!
Dhidhi you are a life saver
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
How can we use 1i8n language changing in carousel. Mine work only for 1 language then start showing of the previous language
Have you had the duplicated bug issue ? I implemented this but it duplicates a card just below one of the existing ones
I loveeeee thiss!❤ thanks making it clear
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..
great job Etisha!
do you have discord ?
I love this ❤ uploaded more
Great content, butI have a question,
What if i want to show only one slider component instead of 3....
Simply specify slidesToShow: 1
thanks a lot, u=your video is really time saving
please could you explain in details about in the public folder in the students details
You just get a new subscriber thank you so much
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
Great explanation 🎉
great video thank you for clear explanation
wow how can you style it by the classname ? I'm newbie
Thanks for the help!
Please make more videos on react js really helpful.
thanks , it was quick
mam mere both sides slide waly arrow show nahi ho rhy...i dont know why i have that problem
Thank you so much... You really make work easy
video on skills show progress bar.. with animation 🙏
For mobile how it was going to look please one video on that please Mam
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`
);
}
};
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?
Can u please make another video on how to reuse the same carousel component with other images and text please ....
thank you
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
why i don't show arrow icon both side
Sand problem
I take almost one month to create slider,but this one is very easy
Why doesn't the slider work if the data comes from API?
How can we change colour of the arrow bar
how do i change the button color mrs.etisha??
Thank you so much sister
didi how to create a previous file i m not able to see in description link there was not explanation of that
gracias
Thank you so much.
Amazing
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
Excelente!
hey Di
please make more videos on React JS like this 😊
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
Thank You so much
the side arrow is not showing, can anybody help me
My flex properties are replaced by display inline-block when i warp in .. But in your case its working how?
Do you want solution of it
@@sanasajid2681 no its solved now..
thank you very much
anyone can tell me how can i change the navigation dots at the bottom color to white?
Thank you so much, I have wasted 36 hour in it ,I hope, the code in this tutorial will work .
Tried, slick , spring, swiper, .....
None of them gave me proper result
thanks for the tutor
not showing next, prev arrows
Where is the code or the repository?
helpful video .
Thanks so much mam
responsive is not working for different devices
how to add those images?
mine is not working...
hello mam please class link how first time see this class please mam reply and tell me
Can we remove the arrows?
no link to the source no direct link to the git .. just waste of time
Not that deep. Write yours!
yeah she showed you everything you need to know but you are too lazy to do anything yourself
@@tdekoekkoek Haha nice ..
Why u need source code this simple thing that will be just copy & paste do it ur self
Mam ek video API K Par bhi bnaayge ? ...
is it an infinity scroll?
is it responsive or not ??
thanks
Both side arrow is not coming in my code
same problem
how to make a carousel from scratch???
Why is the pagination dot not showing up?
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;
}
awsm bahen
it is not working
Your content is nice, you should also show the mobile responsive version.
❤❤❤
sory but half o this video is bool..... why you do not make content more specific and target from his name???