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.
---
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/respon...
#Card_Slider #Sliding_Card #html_css_javascript
---
🎵 Music Credit:
Deep Sea by Vendredi / vendrediduo
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library • Deep Sea - Vendredi (N...
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_something-bout-july
Music promoted by Audio Library • Something 'bout July (...
Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
➤ Video Link: • Ehrling - You And Me (...
Song: Ikson - We Are Free (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
➤ Video Link: • Ikson - We Are Free (V...

[@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!

[@bkishwarchavan7787]

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

[@lucasoriental6515]

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!!

[@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.

[@jkwilliams7148]

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!

[@davidruiz-bw5mx]

TE PASASTE UN DIV DEBERIA ESTAR DENTRO DEL SLIDE-CONTENT

[@sasimo7019]

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

[@princechaudhary3382]

Do you guys really think that he taught you something valuable? He doesn't know what he is doing, he is just unnecessarily nesting the divs element without having a property understanding and clarity

[@ab_obada5012]

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

[@CodingLabYT]

Thankyou so much.

[@arthurkhallifa]

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

[@JnaabProduction]

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

[@CodingLabYT]

Glad you liked it!

[@indidwilestari853]

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.

[@CodingLabYT]

You are so welcome!

[@cinna_talks]

@@CodingLabYT can you provide the code

[@codingkatta7721]

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

[@CodingLabYT]

Thank you for your kind suggestion. I will think about it.

[@winter8136]

@@CodingLabYT your styling is really cool. But it's just that we don't understand what's happening, like why you use that (certain) css property? Why do we need to do this? Because you dont talk.

[@mahatojigaming]

@@CodingLabYT please think fast sirji

[@prathamnemade2293]

​@@winter8136 😊

[@yasinsherif8875]

@@CodingLabYT yes sir it will helpful we can't follow with your flow

[@TeachAshutosh]

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

[@CodingLabYT]

It's my pleasure

[@JJ-ot3ps]

love to see this in tailwind too!

[@CreativeTutorialsWeb]

What an amazing project great video Sir 👏👏

[@CodingLabYT]

Glad to hear that.

[@5420DhruvBarapatre]

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

[@martinezsalinasemiliano6543]

the best video I’ve ever seen, thankssss!

[@CodingLabYT]

Glad you liked it!

[@saidanadam5373]

The Best Content , i love You Bro

[@kabic18]

Excellent video. Thank you so much.

[@CodingLabYT]

You are welcome!

[@jujuba_radioativa]

Thank you very much! This help me a lot!!

[@kevinsamir4655]

You have no idea how grateful I am for tNice tutorials series

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

[@enezinho2222]

Adamsın dogukan

[@ahmetdogukankonuk]

@@enezinho2222 teşekkürler dostum

[@vijendrapandey1830]

can you please tell how can i display 4 cards instead of 3

[@ahmetdogukankonuk]

@@vijendrapandey1830 all you need to do set slidesPerView to 3 in which screen size you want

[@vijendrapandey1830]

@@ahmetdogukankonuk not working

[@t.i.i8608]

thank you for the video, it's helpful!

[@CodingLabYT]

Glad it was helpful!

[@emadbr2048]

It was useful. Thank you ❤️

[@CodingLabYT]

Glad it was helpful!

[@dipanjansaha9043]

kudos to you bro!!!!

[@Basicknown]

Thanks this is very helpful 😊

[@SquaredbyX]

I just did the 1st one yesterday and had to update the slider js part by 2 lines missing from the video, I assume by the time that has gone by. Also had to add 1 level of nesting and give card its own space after swiper-slide.

[@jimenaulloa9720]

really great work, thank you

[@CodingLabYT]

Glad you liked it!

[@ryujin2206]

When I put swiper-slide on the card div, its making the card take up the whole width of the container??

[@marcos2380]

Maravilha aprendi muito

[@puloksoren1033]

[@uniquegamer682]

Thanks a lot for this video👍🏻👍🏻👍🏻

[@CodingLabYT]

My pleasure 😊

[@Henry_Nunez]

👏 EXCELENTE

[@pratyadutimishra3332]

Superb superb and superb!!!!!!!!!!!!!!!!!!

[@CodingLabYT]

Thanks 🔥

[@godfirstjohnson1916]

Can you make full crash video on properties to use,to initially make your website response with little work at media queries

[@BrianMaia]

Thank you so much!

[@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?

[@rollim3100]

thank you very much !

[@shilpashekar1139]

was struggling to keep this button outside thanks

[@technosujeet]

Hey @CodingLab can you make such tutorials on react? Please make of you can 🙂

[@saiteja6225]

hi bro can u make a video "showing selected menu and submenu dynamically after page reload"

[@watashiuruhaku9901]

Nice tutorial, i just cracked soft soft ;)

[@CodingLabYT]

Good to hear!

[@vinayshetty5929]

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

[@sumitrawat6621]

Great sir you are awsome 💕❤️😊

[@CodingLabYT]

Thank you so much 😀

[@sumitrawat6621]

Sir i am 16 years old and very much interested in web developing You are my best teacher sir, i want be become your student

[@licioussamuels]

Can you use two different swiper slides without CSS and js conflicting

[@masfatkhurrifqi]

Thank You

[@christCE]

increíble tutorial, muy bueno

[@CodingLabYT]

Glad you liked it.

[@abcfuture5779]

cool keep it up bro

[@CodingLabYT]

sure I will

[@ararune3734]

Holy mother of god somehow you always upload a video on the topic I need currently. Source code tho, how soon will it be there?

[@CodingLabYT]

Source code link will be uploaded soon.

[@zuhairn]

Thanks alot bro....it helps alot ❤🤍🌹🌹🌹

[@CodingLabYT]

Always welcome

[@Muhammad-Saim-Rajpoot]

Thanks ! Really helpful.❤

[@CodingLabYT]

Glad it was helpful!

[@divyaangane5304]

Hi do you have the swiperjs code?

[@Muhammad-Saim-Rajpoot]

@@divyaangane5304 yup . I have it . I integrated it in my website. Works perfectly.

[@ZeinaAymanFathyMohamed]

that is extremely helpful♥

[@CodingLabYT]

Glad it was helpful!

[@user-tl9my1ld7o]

really helpful

[@vitaliykolesnik3449]

THANK YOU!!))

[@CodingLabYT]

You're welcome!

[@alexalejos1049]

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

[@barankurt4316]

hello, how can we filter these profile cards by city and district location with select options?

[@UdomTanong]

Excellent

[@CodingLabYT]

Thank you! Cheers!

[@hackeditz2.0]

Complete js in one vid from beginning plz and sorry for not commenting bcoz my phone drowned in water but now 😎😎

[@Deus-lo-Vuilt]

amazing

[@maro__uane]

Excellent video. Thank you so much. but when i host my website the picture don't show

[@saidanadam5373]

Thank you so much

[@CodingLabYT]

You're most welcome

[@palapa804]

I'm wondering, what if it's made automatically?,does it need to be reset all?

[@bricas13]

lo he logrado , gracias

[@falana_vlogography4240]

thanks you so much brother

[@CodingLabYT]

Most welcome

[@user-rz7mi8pi3h]

Thankyou very much your content help a lot😊.Can i use it in a website?they wil not claim copyright?please tell

[@RiverStyx-fw7qn]

thank you so much

[@CodingLabYT]

You're welcome!

[@BryanGranseDevs]

Nice

[@GiorgiRatiani31]

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

[@ashekerasulaltayef4087]

Stick with it it gets easy over ti

[@harshgurjar8629]

🤩

[@dex_code_yt]

Please make a custom video player in html css and js

[@TeddyWrestling]

Can I replace the arrow (swiper-navBtn) with an image?

[@colinritchie5204]

If i want to copy and past multiple rows of these how could i stop the button from making all of them scroll

[@lucasoliveira-qp6my]

Thank you

[@CodingLabYT]

You're welcome

[@mohamedyoussef8835]

Awesome video +++++++++++++ 🙂

[@CodingLabYT]

Thank you! Cheers!

[@ahmedabdelmonem2409]

Thanks for the tutorial

[@CodingLabYT]

Any time

[@ABHISHEKKUMAR-wt1pw]

Sir i love your video please add your voice especially in js video

[@CodingLabYT]

Glad you liked them.

[@godfirstjohnson1916]

The video is very nice, must it would have been more better it it was a little slower and explanation for beginners

[@CodingLabYT]

Ok next time

[@nanaagyemang230]

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.

[@waleefalrooh8]

How can I make it look like this as when someone add a new name, description and pic using javascript and inputs?

[@proexpert6325]

How do you add many sliders. I want to make it 4 but one overwrites the others

[@mayankdagar7]

I want 3 sections with the same functionality, how to do it?? Also how to change the width of every card

[@CodingLabYT]

Duplicate the slide container three times. To expand the cards width, increase the slide container width

[@rissyt4546]

works gj

[@saygonwaterpark3518]

thx buddy

[@CodingLabYT]

You're welcome!

[@davidruiz-bw5mx]

amigo excelentu tutorial, pero en esta parte cuando lo quito funciona el automatico a pasar las imagenes, pero cuando lo dejo ya se detiene que problema hay ahi ?

[@quizgamerzdevkrishn914]

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

[@tikka6554]

please create a painting app with erasing option please 🥺

[@ankitjana8506]

if we use 2 sliders working together how to chnge it?

[@Alex-xe6bl]

when I set the slidesPerView to auto or whatever value. it puts the 1st item as last. the second item is displayed first

[@CodingLabYT]

You can take source code from my website link is in description

[@rizwanmehmood3486]

i'm new in angular typescript can this work in angular

[@feberxn9138]

I guarantee tNice tutorials - I am going to pursue soft one way or another. It is my dream to make art that inspires people and shows them so

[@CodingLabYT]

Thanks a ton. All the best.

[@davidross1332]

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

[@SagalMuhammad-hz6bz]

i have the same problem please how did you fix it

[@doni654321]

thank you

[@CodingLabYT]

You're welcome

[@doni654321]

@@CodingLabYT I am going to use the JavaScript behind it

[@joyo.5804]

Hey I'm learning to create my first login page, i'm just confuse with the JS folder, what is inside of JS folder, is there a link you can provide so I can follow your tutorial. That'll be great help for me. Thank you.

[@CodingLabYT]

This is the starting file and it will help you to follow my video tutorial step by step - drive.google.com/file/d/1iK8Lwj_USu_jtK5TogZrzoIKVn3hEQ-g/view?usp=sharing

[@DarkAngel9660]

Dude, can you make a sidebar with submenu and dark/light mode?😅

[@CodingLabYT]

Already uploaded.

[@osondudominionebube7834]

@codingLab An excellent video! Please how can i get the source code to this tutorial?

[@MohamedIslamDJOUABLIA]

hi bro , i dont know why when i clicked on the view more button of the second card it slide to the next card , whats the problem? how can i remove this

[@maksymiliankowalczyk4957]

I really like the extension to these icons in explorer, what's it called?

[@CodingLabYT]

swiper.js

[@broccoli1938]

trust me bro on spite of that I don't know who are you but I love you more than those who I know💙

[@CodingLabYT]

Thank you so much. Best regards from my side.

[@NuclearGames111]

Bro please make one to one chatting app using firebase HTML CSS and JavaScript please pick my comment 🤞🤞

[@hoahoangxuan9246]

How to quickly enter the new line to write code instead of click -> button?

[@CodingLabYT]

CTRL + Enter

[@storypoint5126]

What if we want multiple slider in one html file how to do that