Awesome Dark Carousel Slider in HTML & CSS | Carousel for Card Slider or Image Slider

🎬 Awesome Dark Carousel Slider in HTML & CSS | Carousel for Card Slider or Image Slider
Hi there!
Mathe here and in this video we are going to create an amazing Dark Carousel Slider. Whether to make an Image Slider or a Card Slider, this video helps you to get that carousel slider effect like where each slide is given a position when another slide is showing as the main one - the carousel slider is a great way to present information dynamically and interactively.
In this video we create the Carousel Slider using HTML and CSS.
👍 If You Enjoy This Video, Consider Hitting The Like Button!
🥁 Subscribe To Stay Notified For New Videos: / @mathe.creative
🌟 The "Front-end for Beginners" EBOOK is now available! High quality content, check it out now:
/ shop
[SOURCE CODE]
Available to free members:
--- Patreon:
🌟 / mathecreative
Timestamps
00:00:00 - Demo
00:00:39 - Base HTML Structure for a Card Slide
00:02:35 - Replicating the Slides
00:04:05 - CSS Base for Carousel Behavior
00:07:05 - Card Styling
00:14:15 - Dreams come true
keywors:
card slider
image slider
card slider in html css
card slider html css
card slider html css only
card slider using html css
card slider html and css
how to make card slider in html and css
carousel html css only
carousel slider html css
card carousel html css
how to make card
how to make card html css
card slider html
carousel design
card slider html u0026 css
image slider html css
image slider css
carousel image slider
css card design
html css

[@mathe.creative]

Hi again! Learn, share, enjoy and develop guys! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative

[@hackerprime9722]

This is what I was looking for! Keep up the good work!

[@mathe.creative]

Thanks bro!

[@xiztspike81]

thanks so much! 😍💯

[@mathe.creative]

You're welcome 😉

[@cachemoney8825]

This is really great stuff thank you for sharing ! You should make more content like this!

[@mathe.creative]

I'm very happy that you liked it 🫡

[@sahilsharma2867]

perfect! good one

[@mathe.creative]

I appreciate the compliments, bro 😀

[@joseluisbecerra3855]

I really appreciate it, it really helped a lot!!!

[@mathe.creative]

I'm happy to have helped you 🙂

[@mdkawsarislamyeasin4040]

Thanks for the video and mostly for the source code

[@mathe.creative]

You're welcome 🫡

[@abhishekjain7541]

THE BEST WORK AND THE CLEANEST CODES GREAT WORK DUDE HELPED ME A LOT

[@mathe.creative]

Thanks for the compliments and glad I could help :)

[@shohruxshokirov7237]

just WOW 👏

[@mathe.creative]

Thanks bro! 🙂

[@user-mv5xf6rz3k]

Thanks, this is a good vide

[@mathe.creative]

You're welcome 🫡

[@thewojack]

very useful

[@mathe.creative]

Thanks 😃

[@mrz4237]

👏👏👏

[@mathe.creative]

Thanks bro! 🙂

[@ahmedabdelmeguid1131]

perfect

[@mathe.creative]

I'm glad you liked it =)

[@Natural-Pigeon]

you are greet bro ❤❤❤

[@mathe.creative]

Thanks, bro :)

[@leandrohenrique6056]

❤💪🏻😊

[@mathe.creative]

😉😉😀

[@pietromalvagi113]

Hi man, I tried to send you an e-mail some days ago at the address I found in the comments below, idk if you didn't read it or if you don't have time but just letting you know😊

[@mathe.creative]

hello! I checked my email and your message automatically went to spam 🤦‍♂️, sorry, that's why I prefer a Patreon DM haha. I'll take the opportunity to see what you need and answer you, if possible by today, don't worry.

[@ayushmurugkar4657]

Hi! Hi I am trying just the card scrolling using html and css only! but I am not able to get any behaviour using #s1:checked~ .cards #slide3{ transform:scale(1.2) } What am I doing wrong? I made sure everything is structured as in the video like each label is assigned perfectly for the radio button and each label has an slide id and card and an image within it please help

[@mathe.creative]

Hi there! I will try to help you, don't worry. So, your css declaration is apparently correct, what it expresses is "when the box with id s1 is checked then the element with id slider3 inside the .cards must have this style". Therefore, I believe the problem is possibly in your html, in the organization of the elements. Check it out and get back to me, the checkbox entries must be siblings of the elements that have the .cards class. Did you get it?

[@ayushmurugkar4657]

Thank you for kind response! Actually, it was resolved as soon as I realised I was putting an extra comma after #slide,{ and it should be #slide{ Thanks again

[@mathe.creative]

@ayushmurugkar4657 Oh yes, it doesn't really work 😅 Glad it went right!

[@playAliMusic]

Hey, I used the source code and everything works fine, but I'm getting this blue box/container behind all of the cards, it seems to appear only when I add the .cards in the CSS. But I can't get rid of the .cards otherwise they don't go to the right part of the page. How would I get rid of this blue box? UPDATE: I found what is causing it, it's the width. If I get rid of the width it will get rid of the box, but the cards will now show all the way to the right side of the screen, and attempting to move them back makes the box appear again. (with width and margin right/left). Would still love some help if you got any

[@mathe.creative]

Hi there! Well, let's try to solve this little problem. First, as you mentioned about the cards being on the right, make sure you've made the adjustment I do at 13:03, ok? If the problem persists, I would need more details about this "blue container" that is appearing. If you prefer, you can send me an email with prints (it is available in the "About" tab here on the channel). I hope it works and if not, just contact me :)

[@mudassirrehman1317]

hello. hope you doing well. how can we add time delay instead of clicking.i mean auto carousel in thise example. please replay must

[@mathe.creative]

Hi there, Mudassir! Goood question, this would make the slider much more dynamic actually. But I think it would require some javascript so it wouldn't be very simple. I wrote it down here to make a video about it and I'll research it, if I find a quick solution I'll come back here and pass it on to you, ok? Thanks for commenting man :)

[@mudassirrehman1317]

@@mathe.creative thanks for you valuable words I am waiting for that. keep it up

[@alixone6668]

hello.the size of the cards covers the whole screen. How can I make the cards smaller?

[@mathe.creative]

Hit here! In the styles.css file, on line 37, we set the height and width of the card container - you can change it there. Alternatively, you can adjust it directly on the cards at line 58. If you have any more questions, just ask here, and either I or someone from the community will be happy to help you :)

[@Gaurav009]

Hi, cards are toggled on click, can you please tell codes to toggle the cards on touchscreen swipe?? Please, must reply.

[@mathe.creative]

Hi brother! I'm sorry but I believe that putting the codes here in the comments may confuse you or be too much, but don't worry, I intend to make other videos about sliders this time using the SwiperJs and SlickJs libraries, I'm going to write it down here with me to solve the touch problem, ok?

[@Gaurav009]

@@mathe.creative okk. But please make it soon.

[@raginiragini5734]

slide is not getting added . even thought i have worte css for every one . please help me

[@mathe.creative]

Hello! In the description of the video there is the source code (relax, it's free), could you test it based on it? I hope it helps :)

[@guidsz]

someone knows a community where people help others with html and css stuff?

[@mathe.creative]

Olá, Guilherme! Estou criando uma comunidade lá no Patreon, caso tenha interesse. Lá voce também pode ser um membro free, gostaria de ter voce por lá. cara. Já te adiantando, pretendo disponibilizar por tempo limitado o ebook sobre Front-end Edição 1 para os free members assim que eu lançar a Edição 2, então fique atento, dev :) www.patreon.com/MatheCreative

[@kitagaming5945]

how to make this card slider responsive? thats checked css make me failed :(

[@mathe.creative]

For the mobile version I think we could only display 3 cards instead of 5, we would do that using CSS media queries, what do you think?

[@blackmetal616]

how could i make this work with just 4 cards?

[@mathe.creative]

Hi there! So, you would need to adapt the html for four card entries (that inputs and labels). After that, edit the css that starts here 4:46, with the same logic of adapting to 4 cards and not 5 more. I hope it helped you :)

[@cesarsanchez1722]

Responsive?

[@mathe.creative]

Hi! For the mobile version I think we could only display 3 cards instead of 5, we would do that using CSS media queries. Hope this helps

[@ramanmadhukar6083]

how to make it autoplay

[@mathe.creative]

Hi there! Good question, this would make the slider much more dynamic actually. But I think it would require some javascript so it wouldn't be very simple. I wrote it down here to make a video about it, ok? Thanks for commenting :)

[@samsonnathanielr.9304]

Can you send me the entire css? I have copied your css thrice but the card still not working :(

[@mathe.creative]

Hey, bro! Source codes are on Patreon (www.patreon.com/MatheCreative) :)

[@whitesky8013]

When you hide things out thats where it makes confusing

[@mathe.creative]

Hello, I didn't quite understand where you found difficulty, maybe if you explain it to me in more detail I can help you, as I helped other people :)

[@whitesky8013]

@@mathe.creative if i have an already navigation bar is it ok if i add this would it messed up my current work?

[@mathe.creative]

@@whitesky8013 Well, I don't see any reason for this slider to damage your navbar, they are distinct elements. Test it out and see what happens, if there is any issue, you can send me an email with more details and I'll help you resolve it 🙂

[@youaremad1736]

@@mathe.creative are you willing to style a website for me? I would pay. Thing is I coded the back end using Django, but I suck so bad when it comes to UX/UI, my websites never look professional

[@breechcomet9724]

great tutorial i liked and subscribed aswell actually helping me more with front end, by the way i practiced this with 5 cards and was able to get similar results but when i tried it with 6 cards it became a mess can you help here is my code I did play around with yours so do bear in mind it'll look weird. but here is the css code: #s1:checked~.cards #slide5, #s2:checked~.cards #slide6, #s3:checked~.cards #slide1, #s4:checked~.cards #slide2, #s5:checked~.cards #slide3, #s6:checked~.cards #slide4 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(-70%, 0, -220px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide6, #s2:checked~.cards #slide1, #s3:checked~.cards #slide2, #s4:checked~.cards #slide3, #s5:checked~.cards #slide4 #s6:checked~.cards #slide5 { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%); transform: translate3d(-35%, 0, -120px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide1, #s2:checked~.cards #slide2, #s3:checked~.cards #slide3, #s4:checked~.cards #slide4, #s5:checked~.cards #slide5, #s6:checked~.cards #slide6 { box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%); transform: translate3d(0, 0, 0); --current-color1: #fad00c; --current-color2: #ECEAED; } #s1:checked~.cards #slide6, #s2:checked~.cards #slide5, #s3:checked~.cards #slide4, #s4:checked~.cards #slide3, #s5:checked~.cards #slide2, #s6:checked~.cards #slide1 { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%); transform: translate3d(0, 0, 0); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide5, #s2:checked~.cards #slide4, #s3:checked~.cards #slide3, #s4:checked~.cards #slide2, #s5:checked~.cards #slide1, #s6:checked~.cards #slide6 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(35%, 0, -120px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide4, #s2:checked~.cards #slide3, #s3:checked~.cards #slide2, #s4:checked~.cards #slide1, #s5:checked~.cards #slide6, #s6:checked~.cards #slide5 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(70%, 0, -220px); --current-color1: #ECEAED; --current-color2: #404457; }

[@mathe.creative]

Hi there! First of all, sorry for the delay in responding, KZbin has hidden your comment from me for some reason. Anyway, we need to remember that this video effect is only valid for an odd number of displayed cards. We could easily have 6 cards in total, but we would only show 5, so far ok? Therefore, we would need to have one more declaration of card behavior that would basically look like this: #X1:checked~.cards #Y1, #X2:checked~.cards #Y2, #X3:checked~.cards #Y3, #X4:checked~.cards #Y4, #X5:checked~.cards #Y5, #X5:checked~.cards #Y6 { display: none; } Do you think you can follow? If you prefer, you can send me an email :) [e-mail]

[@MagnanimoTandil]

hello thanks for get us the code. I dont understand this: #s1:checked ~ .cards #slide4, #s2:checked ~ .cards #slide5, #s3:checked ~ .cards #slide1, #s4:checked ~ .cards #slide2, #s5:checked ~ .cards #slide3 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(-70%, 0, -220px); --current-color1: #ECEAED; --current-color2: #404457; } can you explain to me? o maybe in a new video. Regards

[@mathe.creative]

Hi there! I can explain yes, or at least try :) First the "~" selector means something like "selects every that is preceded by a ", so in our case it's specifying that when the inputX is checked then slideX should receive this styling, got it? As we have 5 cards in the video, we need to specify which card will receive this styling when each card is in focus, for example, when card 1 (slide1) is in the center (focus) where silde2 should be, and slide3, and the slide4... It takes a little effort to get the hang of it, but then you never forget it, I hope. Hope this helps!

[@MagnanimoTandil]

@@mathe.creative Thank you very much for answering. I think I understand it, I'm going to practice it and try to achieve it. Thank you very much and greetings.

[@esolute]

@@mathe.creative Thanks a lot ... Please keep doing what you do. about the portfolio, I'm interested