How to make Card Slider in React JS | React Slick
HTML-код
- Опубликовано: 4 окт 2023
- 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: gargetisha@gmail.com 
Наука
This was really helpful. I struggled with a few other libraries/tutorials but this one hit the mark and swiftly too! Great work :)
Thank you for sharing your process. Thank you for your clean and clear explanation ☺️
Hello, can you give me a way to customize the previous button and next button according to what we want?
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
so helpful, thank you! Also, i love the way you pronounce carousel
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
I loveeeee thiss!❤ thanks making it clear
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
Clean and Clear Explain loved id ;)
Thanks a lot, was struggling with the margin issue
Thank you so much... You really make work easy
thank you for this video queen!
Amazing you are the BEST!
great video thank you for clear explanation
Colour combination is soo cool... 😍
Thanks for the help!
You just get a new subscriber thank you so much
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 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?
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
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.
great job Etisha!
do you have discord ?
Great explanation 🎉
Dhidhi you are a life saver
didi how to create a previous file i m not able to see in description link there was not explanation of that
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
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
Thank you so much.
Please make more videos on react js really helpful.
I take almost one month to create slider,but this one is very easy
Thank you so much sister
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
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
how do i change the button color mrs.etisha??
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
helpful video .
no link to the source no direct link to the git .. just waste of time
Can u please make another video on how to reuse the same carousel component with other images and text please ....
Can we remove the arrows?
the side arrow is not showing, can anybody help me
thanks for the tutor
Why doesn't the slider work if the data comes from API?
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..
Thanks so much mam
Amazing
Excelente!
hey Di
please make more videos on React JS like this 😊
is it an infinity scroll?
Great content, butI have a question,
What if i want to show only one slider component instead of 3....
Simply specify slidesToShow: 1
how to add those images?
gracias
not showing next, prev arrows
why i don't show arrow icon both side
Sand problem
is it responsive or not ??
Where is the code or the repository?
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`
);
}
};
thanks
mine is not working...
responsive is not working for different devices
how to make a carousel from scratch???
hello mam please class link how first time see this class please mam reply and tell me
❤❤❤
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
Mam ek video API K Par bhi bnaayge ? ...
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;
}
Both side arrow is not coming in my code
same problem
it is not working
Your content is nice, you should also show the mobile responsive version.
Yeah, I agree with you. I also need responsive version
awsm bahen
How do I change arrows color...?
Just change backgrounds color in style of next or prev arrow component.
didi can you provide source code ??
Here it is : github.com/EtishaGarg/reviews-carousel
thank you so much ☺@@EtishaGarg
plz help
Hiii..
sory but half o this video is bool..... why you do not make content more specific and target from his name???
u r cute coder ....just rename ur channel
hindi accent...; i couldn't watch more than 2 minutes
The you have psychological problem🙄🙄 consult your psychologist
Nobody cares
😂😂😂wahi ...@@sanketsingh5555
But you have time to comment ? Ok good allright hunhun we got it
Cry more😂😂 nobody cares about your shit.