How to make Card Slider in HTML CSS & JavaScript

How to make Card Slider in HTML CSS & JavaScript | Codinglab

In this video tutorial, you will learn to create a Card Slider using HTML, CSS, JavaScript, and Swiperjs. In this card slider, I have added all the features that the user expects.

🗂️ Get Source Code of this Profile Card Slider

🌐 Visit CodingNepal for helpful coding projects

⭐ Hire me on Fiverr

📷 Follow me on Instagram

🤝 Support my work with a coffee

Music Credit:

Ikson - Anywhere (Vlog No Copyright Music)

Something 'bout July (Instrumental) by RYYZN

Ehrling - You And Me (Vlog No Copyright Music)

---

Keywords:
How to make Card Slider in HTML CSS & JavaScript,how to make owl carousel,how to make card with sliding feature,how to make sliding card using html css javascript,how to make card,how to make an swiper slider,swiper demo,card slider html css,card slider html css javascript,card slider html css js,card slider html,responsive card slider in html css,responsive card slider,responsive card slider using html css & javascript,responsive card slider html css

[michaelnorton]

Very Nice!!👌🏻🔥 The only thing I'd say though, is that Owl used to be my goto plug-in for carousels, but since it got abandoned a few years ago now (and as such is no longer updated/supported), I've switched over to 'Swiper' - very similar, but with a lot more options!!👍🏻

[DaHSuNnI]

yo this guy is nuts! Welldone. Great videos too!!

[davitiusrealm]

Thank you very much. It helped me a lot.

[yesyesyay]

I used to be very skeptical or uncomfortable using libraries, but after learning how to write carousel on my own helped me have confidence in using the library. I kinda know how it works underneath and helped me play around with optional parameters. I would suggest folks to try writing carousel yourself once from scratch without using libraries.

[digigoliath]

Awesome!!! TQVM!! I will definitely do this project.

[jgzvyrz]

it's very nice and helpful thank's.

[Technophle]

at 3:20 you can use 50% on the image container and set overflow hidden on it. Then, you don't have to repeat yourself twice when you need to change the value

section .card image {
width: 140px;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
}

Also, aspect-ratio is the trick not to repeat yourself when changing values. You can change value at one place.

[dekafmusic]

Thanks for the video, nice design. I prolly learned a few css tricks from you today. Only one thing tho, this isn't responsive. We would really appreciate one that makes a slider like this responsive

[necronomicon-xmortis]

you rock bro...i have the card made thats easy now stuck trying to find the js and stiĺl need buttons hope i can figure it out good job it looks amazing

[neinheart]

imagine going to youtube and finding a web tutorial that goes straight to the problem! Couldn't be me!

[brendacosta]

muito bacana, ! parabéns pelo trabalho

[Dinesh]

The best channel around! 🌟 If you can just introduce your voice, 🗣 it'll be more helpful as we don't understand some of the ideas until you finish that! 🤔 I hope you'll consider it! 🙏

[zuzzubaid]

terimakasih, video ini sangat membantu untuk siswa SMK TI Annajiyah BU Jombang

[chuny_dev]

Really nice dude, I have a question, do you have videos explaining how to create the parallax effect?

[dimasteraputrahernawan]

Thanks tNice tutorials helps alot man!!

[jpahgase]

This is so nice! I’m wondering if how can I make the slidesperview from three to 1 once it reaches a certain screensize?