How to make Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

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.

---

🗂️ Get Source Code of this Card Slider

🌐 Visit CodingNepal for helpful coding projects

⭐ Hire me on Fiverr

📷 Follow me on Instagram

🤝 Support my work with a coffee

#Card_Slider #Sliding_Card #html_css_javascript

---

🎵 Music Credit:
Creative Commons — Attribution 3.0 Unported — CC BY 3.0

Something 'bout July (Instrumental) by RYYZN

Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.

Song: Ikson - We Are Free (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.

[codingkatta]

This is very helpful but Please try to add your own voice with explanation .

[lucamorropa]

I just wanted to say I've discovered your tutorials not too long ago but the amount of videos I've watched and learn from you I will always appreciate and never forget. Thank you so much!

[ahmetdogukankonuk]

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,
},
},

[bkishwarchavan]

bro you are pro student got benifits of it ...superb

[lucasoriental]

I'm speechless... I was trying to make this behavior in my React App by myself but I couldn't... Bro, you saved me! Thanks a Lot! I will implement on this way! Thanks again!
SwiperJs is majestic!!

[jkwilliams]

I coded along with you and this project works!! I couldn't get the little bullets under the images to show up but everything else worked fine! Thank you for an easy code-along. I appreciate you!

[ab_obada]

Man I love YouTube a lot. It introduces a lot of creative people.
you deserve my appreciation.

[vinayshetty]

Please follow the steps exactly how he will do. in swiper download the version same as he downloads and make separate file for css and javascript to get correct output for slider

[indidwilestari]

THANK YOU!!! TNice tutorials is such an amazing tutorial. I just got soft soft today and was playing around on it but had no clue how to really use it.

[sasimo]

definitely diving into your videos. Thank you so much for taking the ti to teach us that are green in the field. Have a great day

[davidross]

My card fills the entire container, I have tried for hours to get this to work. My prev and next buttons wont work either and I can't slide with the mouse

[quizgamerzdevkrishn]

in swiper js website the option the infinite loops one is not coming

[nanaagyemang]

This tutorial is good, i was able to learn something but the spaces between the cards did not come also the cards are not swiping as expected. if theres any way you assist me please.

[arthurkhallifa]

i was trying to find a way to make those slider's responsive, to my lucky i found ur video, ty so much!

[TeachAshutosh]

Thank sir, you are my life on YouTube platforms
Because I have learn many code see your video.

Big fan sir

[CreativeTutorialsWeb]

What an amazing project great video Sir 👏👏

[DhruvBarapatre]

Thank You Broooo.... For Teaching Slider In html Css ❤❤❤❤❤

[Gaanamusicrecords]

An excellent video turned out, everything is well thought out, a very clear instruction turned out)))

[RIbbb]

Great tutorial. Learned a lot (especially your shortcuts - didn't get that in my paid courses haha) would love some more of these using the current version of Swiper. Also a video on your thoughts about Swiper would be cool. Thank you and thanks for you great content.

[GiorgiRatiani]

never guys never trie to learn such a big code
try always small and ese wayy