How to Create a Carousel (Basic) - HTML, CSS & JavaScript Web Design Tutorial

Подписаться 132 тыс.

Просмотров 62 тыс.

50% 1

Link to SOURCE CODE:
codepen.io/dcode-software/pen...
In today's video I'll be showing you how to create a basic carousel using HTML, CSS and JavaScript. This is a very simple solution with no fancy animations but as a result, doesn't require much code. Enjoy. 🙂
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #javascript

Опубликовано:

11 авг 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 36

@rebeccalauren4904 Год назад

I am so thankful for this. I was fighting with a bootstrap carousel and thought - why don't I just learn to do it from scratch? very thankful for your video. :) subscribed!

@jamesmassa1999 2 года назад

Watch this video! There is a hidden gem - Dom will instruct on how to select an element and de-select all other elements. NICE! He does it for a specific reason in the video, but there are many variations on how you can use this little gem of a technique. As always - Thanks, Dom!

@leslievelvy 3 дня назад

thank you so much! it's so simple and easy to follow

@lulusaikou221 2 года назад

Simple but very useful tutorial, thanks❤

@priyansh5233 2 года назад

Keep making these videos man, love ur videos.

@dtawantawng5131 Год назад

How would you go about implementing a simple, smooth sliding y-axis transition between slides?

@Reimu_Hakurei_TheCoolMiko 9 месяцев назад

Thanks bro !

@sacramen7o 3 месяца назад

Thank you!

@yettikiran916 2 года назад

We want more like this 😍 from you man 👑✨...

@MaliciousHerp Год назад

I would love to learn how to make a timed version of a carousel! This was great!

@RagneUrak Год назад

instead of onlclick to move the carousel use a timer (time-interval) to call the function every 7000ms

@MaliciousHerp Год назад

@@RagneUrak Hi there, thank you so much. In relation to the code in the video, where would I add setinterval?

@joel-rg8xm 2 года назад

At first, I thought it was too simple, but in the end, the clever code sets up the basis to build a reusable multi-item component template. Thx

@navi2710 2 года назад

This is so elegant it's brilliant.

@clarencecolin8454 Год назад

Thanks for the tutorial. What if you have multiple items? For example 8 items, there would be 8 separate buttons. How would you create just 3 buttons for 8 or more items?

@jaimeandrescarcamosepulved2456 Год назад

helpful and to the point. Thank you !

@DGronki 2 года назад

I will try to avoid remove class for all and then add it to one. It can cause flickering especially when we have display none. I think also better to use "data" attribute to avoid creation to meny listeners.

@ductran7258 Год назад

Exactly what I'm looking for. Thank you, sir.

@amenibramli4213 2 года назад

this video helped me a lot thanks a lot ♥

@lidwinguillermogascagarcia439 Год назад

I have copy paste the source code because it was not working for me, and still it is not working, since the part where you verify using the `console.log(buttonsHtml);` my browser is not recognizing any array at all, sombody help! I'll hate to have to delete averything and go to watch an other video.

@Authorangelaguajardo Год назад

Thank you so much for this!

@4xHitler 2 года назад

watched this cause I wanted to see if there was some interesting JS at play. yep you made something which can easily be scaled and I got to learn 1-2 css tricks on the side