Responsive Card Slider Using HTML CSS & JavaScript | Swiper Js

Responsive card slider, Card slider html css, Responsive card slider html css, Card slider html css javascript, Responsive card slider html css javascript, Card slider css

🔔 Subscribe Now!

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
❤ Support my work

🔗 Source code

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
👨‍💻 Develop the project from scratch

👆 Download (files + images)
- Click on the GitHub link
- Click the green button (code)
- Click Download ZIP

🔗 Resources

⌚ Timestamps
0:00 Intro Responsive Card Slider
1:47 Project Setup
3:00 Variables & Reset CSS
3:15 Card HTML
6:02 Card CSS
11:20 Card Swiper Js
19:02 Breakpoints
22:10 Final Project

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
☕️ Support me

👍 Thanks for watching!
Support me with a like + A Subscription! ❤

#cardslider #bedimcode

[VivekYadav-upuu]

love the sound of keyboard and you can use the scroll-snap-type in css

[fouziaparveen]

Thank you so much it’s really helpful 😍😍😍

[mochellalle]

Habrán muchos canales de fronted, pero no se comparan ninguno al tuyo, lokazo soli, bendiciones

[ValentinQuijano]

Bedimcode aqui un seguidor de Uruguay, pongo en practica todos tus videos y la verdad me parece muy profesional desde las buenas practicas hasta el tutorial en si.
Pero tengo una peticion, estaria bueno que estas clases de HTML, CSS Y JS las llevaras a React con Tailwind y Next, por ejemplo... con las mejores practicas, separado de carpetas y archivos de estos frameworks. De verdad seria un deseo cumplido y un gran paso. Gracias.
😁

[yooutube]

AWSOME JOB, A QUESTION:
How do you do pagination automaticly? on .JS

[coldcat]

Great video as always. Can we have more scss video, since most of the corporate company now using advanced scss.

[hari_xxz]

I accurately followed ur instructions but content can't visible...why i use tailwind with this

[kevyyar]

what if the content like description or title grows? will the card height for all be kept the same?

[leesam]

how can i adjust the navigation moving distance? because my card is a little bit wide, and it kinda didn't align well

[parthsapariya-rbwb]

prev and next button function are not work

[minhbao]

Can you give me the name of this extension which help you to write div.nameclass?

[josephikpotokin]

Hi, this is awesome 😢, I'm having a problem, when I try to add two cards in a page, it seems asif the two are linked together, and the pagination seems to dissappear or control the two, so I guess I can't just copy and paste, what do I do?

[arbu]

why when i apply the swiper class it take full width and my crad structure become smashed

[rea]

Hi all,

I'm struggling with creating card sliders for different categories in the same page. May I please get some assistance?

[dreful]

did you just rename the file when pasted the swiper-bundle.min.css to swiper-bundle.min.js in the js folder?

[حسينعليناقد]

Whats the size of image you used please

[sanidhyagupta]

The avatar images are very good.
What is the source of these avatar images?

[jewelofnile]

Why not the latest version of swiper? Please explain :)

[SamayaGhar]

How do you create contents for when you click on view more

[Belladona-yjif]

my previous and next button is missing