Create Responsive Card Slider in HTML CSS & JavaScript | Card Slider in HTML CSS & JavaScript

In the video, I showed how to create a responsive card slider using HTML, CSS, and JavaScript. This slider allows users to navigate through the cards using slider buttons or pagination. To make it a modern, touch-friendly, and responsive slider, I used SwiperJS, the leading slider library.

🖼️ Get Images of this Card Slider

🗂️ Get Source Code of this Card Slider

🌐 Visit CodingNepal for helpful coding projects

⭐ Hire me on Fiverr

📷 Follow me on Instagram

📲 Follow me on X (Twitter)

🕔 Timestamps
0:00 Card Slider Demo
1:06 Starting with HTML & CSS
9:18 Getting started with Swiper
9:59 Adding Swiper Layout in HTML
10:41 Initializing Swiper in JavaScript
13:10 Applying Custom Styles
16:18 Card Slider Output

🎵 Music credit:
Ikson - We Are Free [Official]

#html #css #javascript #slider

[CodingNepal]

Please let me know if the audio is too loud, too soft, or just right.

[vindhyaplaysgamingchannel]

excellent video with clear understanding. Even though i don't know java script much, i understood .Thank you so much.

[adityamoreno]

Hi, i have a problem, when i tried to change the color of the pagination or the button next/prev, it didn't change. And i have tried other ways, it didn't work as well, what's the problem?

[theoutlier]

You're the greatest!! Thanks for the help.

[bagusraziq]

can i add some animation if the image slide?

[SALVFX]

Hi, I have a problem. My Slider works, but no matter what resolution I have on my monitor, it just show one card, and it extends this card-item almost all over the screen. If I click on the sides arrows, it shows the next or the before card, but one at a time. In essence, if I have my browser deployed about 1200 px width, instead of showing 3 cards or more, it just show one, what could be wrong? Thanks for this awesome tutorial!

[abils]

Hi mister, why after you install the CSS style and script from swiper.js, the card list immediately moves horizontally to the side? Wasn't it previously moved downwards?

[frnaandez]

Obrigado amigo, você é um amigo amigo.

[slow_and_reverb_songs_]

vroo i wanna change image on hover in this slider.

[aliadrian]

is there is a way to make this with out using swiper ?

[siddgupta]

Bhai one video on Create Responsive School Website (HTML CSS & JavaScript)

[afzalmia]

I don't know why people ask money for coffee rather than Chai😊😊😅

[Ashur-lab]

if only I knew you were bout to use an external library I wouldn't watch

[albelafirst]

am i the only one who sliding is not working