How to make Responsive Card Slider in HTML CSS & JavaScript | SwiperJs
In this video, I have to build a Responsive Card Slider using HTML CSS and JavaScript, and swiperjs. You can slide cards by clicking on the nav button and cursor and I have also added pagination. This project is fully responsive and fits all media devices.
—
🔗 Links
✅ Subscribe For More Free Tutorials and Source Code:
➤ https://www.youtube.com/codinglabyt
✅ Download Source Codes From Here
➤ https://www.codinglabweb.com
✅ Navigation Menu
➤ https://youtube.com/playlist?list=PLImJ3umGjxdBzMlTvJk1iz3qFyJhl28S5
✅ All website sections
➤ https://youtube.com/playlist?list=PLImJ3umGjxdAxdZJKS-RH7DodOdy1K5Uy
#Card_Slider #Sliding_Card #HTML_CSS_JavaScript
—
🎵 Music Credit:
Something ’bout July (Instrumental) by RYYZN
Free Download / Stream: http://bit.ly/-_something-bout-july
Music promoted by Audio Library https://youtu.be/OFga9pkl6RU
Song: Ehrling – You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
➤ Video Link: https://youtu.be/8HJSl7AiJNg
Song: Ikson – We Are Free (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
➤ Video Link: https://youtu.be/8hSZZ9um0aM
Please the code source
when I use the grid system everything overflows, maybe it is not compatible with the grid or is it an error in my code? thx for video
I want 3 sections with the same functionality, how to do it?? Also how to change the width of every card
Why there is has smaller straight line beside the name?
Excellent video. Thank you so much.
Why not just write a swiperJS lib.
For people who cant make it responsive, you can use this (like media queries but you can only edit slidesPerView, spaceBetween):
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 0,
},
1024: {
slidesPerView: 4,
spaceBetween: 0,
},
},
Doesn't work anymore, even i copy ur code on your web. IT SUCKS!!
How to quickly enter the new line to write code instead of click -> button?
amazing