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

This video tutorial will teach you to create a Responsive Card Slider in HTML CSS JavaScript and Swiperjs. You can slide the card in this card slider by clicking the arrow button or grabbing it. I have also added pagination on this card slider. For the source code, you can visit the given link.
If you want to create this card slider step by step with the video tutorial, the starting file has given below.
📁 File for starting - drive.google.com/file/d/1rE7l...
---
Hire us on Fiverr
➤ www.fiverr.com/prakashahi
Follow me on Instagram
➤ / coding.np
Visit my website for helpful coding projects with source code
➤ www.codingnepalweb.com
---
⌚ Timestamps:
00:00 Card Slider Demo
01:03 File Structure
01:22 Importing google fonts
02:27 Working on HTML
03:22 Working on CSS
08:18 Implementing Swiperjs
15:34 Making card responsive
16:36 Final result of card slider
#Card_Slider #card_design #HTML_CSS_JavaScript
---
🎵 Music Credit:
Deep Sea by Vendredi
• Deep Sea - Vendredi (N...
Ikson - We Are Free (Vlog No Copyright Music)
• Ikson - We Are Free (V...

[@CricketHighlights-nt7nn]

Thanks a lot . your tutorial fixed my problem

[@ivymetzker4225]

Fantastic teacher! Thank you so much for the tips

[@parasdogra5355]

Thank you so much for Providing this best information 🙏

[@CodingLabYT]

Glad it could helped.

[@slimfit9605]

hello, how to make filtering buttons that will list the people on these cards according to their city, district and profession? Can you make a sample video?

[@alejandrorocha8429]

Hola muy bueno gracias por compartir una pregunta como hago para que pase por grupos de tarjetas es decir 4 x 4 siguientes y no 1 x 1 gracias

[@mohammedelhoussni]

Amazing video and amazing Library
Thank you
You're the best

[@CodingLabYT]

Thank you too!

[@alejandrorocha8429]

se puede usar varios carruseles en una misma hoja ? duplico el código pero cambian al mismo tiempo gracias

[@discipulodesatoshi]

Caiu do céu. Eu estava precisando desse código

[@samkelopj]

thanks , let say the user inputs the images on cards with different heights and width , how to make the image fits the div in good shape keeping the same width and height of div

[@CodingLabYT]

If you want to create Card Slider with vanilla JavaScript, do visit our second channel - ruclips.net/user/CodingNepal

[@codewithdahir]

Thank you for the help. Make complete one with base dots, we will appreciate more.

[@hosseinpanahy5358]

I'm appalled , I've been following your page everyday for the past month and learning new things but this video was counter-intuitive, are you gonna teach us how to copy paste ready things?

[@nishantchaurasia9982]

Hi, How to use the same card slider multiple times on a page? Since, I was trying to use it multiple times on a page but swiper nav button slides all multiple slides at same time. Please help me.

[@QuimZangui]

6:11 I thought column-gap was only used in grid view, why did you use it here in a flex box? Sorry I'm a beginner

[@mohamedashraf6721]

There is a problem that appears to me couldn't read source map what is the solution please

[@wordwonders365]

Please can you make the one that drops to a new line.

[@sajjadalizadeh3443]

It was great and useful

[@CodingLabYT]

Glad it was helpful!

[@mayorca_institute]

Perfect 🥰

[@CodingLabYT]

Thanks 🔥

[@mayorca_institute]

Thought you said you will include the source code soon 😘

[@luispaulocavalcante1459]

What an amazing video! why is it so hard to find content teaching how to create such a carousel with pure JavaScript, without a library or framework?
I really wanted to understand the logic behind it, learn to create from scratch.
Will it be creating if it's that complex from scratch?

[@CodingLabYT]

It is coming soon in our second channel - codingnepal.

[@luispaulocavalcante1459]

@@CodingLabYT I can't believe it 😍 I'm already registered there. I will look forward to it. Your work is amazing, congratulations!

[@kit4520]

why cant i change the color of the .swiper-navBtn? (15:06) please help.

[@madebytl]

Hi, I love your blog theme may I know what theme you're using on your blog?

[@CodingLabYT]

Thankyou !!. It's magnify.

[@sasireddypolimera]

Add voice over brother it's something special from other utube channels

[@CodingLabYT]

Okey I'll think about it

[@husain914]

@@CodingLabYT yes please 😫

[@rayforever]

Yeah bruh please try to explain
It's okey if you are not good at explaining just try give it a try
You can do it !!!

[@kuroisan2698]

may you answer my Q
If I used Swiper as a beginner is that good m
should not I use pure Js Css Html ?
you know people who created Swiper,
they used pure Css Js.

[@CodingLabYT]

It depends on whether you are learning for your own knowledge or making a project for a client. If you want to use pure HTML CSS and JavaScript it will be uploaded soon in our next channel "codingnepal".

[@dineshtechvlogs8307]

@@CodingLabYT codingnepal ur channel

[@ALIEFALWAN07]

nice

[@CodingLabYT]

Thanks

[@nitujha4884]

Voice plz

[@tonyvito5062]

can u do that with vanilla js

[@CodingLabYT]

Turoial on that is comming soon in our next channel - codingnepal

[@tonyvito5062]

@@CodingLabYT thanks I'm following you there too

[@programingknowledge3970]

How to make a youtube video downloader please make a video on this topic

[@CodingLabYT]

Sorry to say, RUclips does not allow uploading such videos.

[@VIVEKKUMAR-fs2mk]

Bro create a script and upload on your website. Please🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

[@codewithdahir]

why can't you make your own custom swiper, I'm so sick of these libraries... like do pure javascript coding we want to learn how to do it from scratch, this is not learning now.

[@CodingLabYT]

ruclips.net/video/PsNaoDhzQm0/видео.html
ruclips.net/video/7HPsdVQhpRw/видео.html

[@maher._jawabreh910]

lolllllllllllll you made the websites with some mistakes