Create A Slider Crazy Effects Using HTML CSS And Javascript

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

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

50% 1

In this video, let's join Lun Dev to Create A Slider Crazy Effects Using HTML CSS And Javascript with extremely cool effects, along with the most outstanding and complete functions of a slider: Allows manipulation of navigation buttons to change the displayed image, A horizontal bar used to count down the running time of an animation, Creating an endless loop helps users click next forever but will never run out of sliders, And automatically switch slider after specified time, This design has also been made Responsive so it works well on different screens.
Step By Step in this video:
00:00 Intro
00:13 Describe project
01:58 Setup proejct
02:23 Create and Design Header
04:05 Create and Design List Item Carousel Slider
08:10 Create and Design List thumbnail Carousel Slider
09:51 Create and Design button next and Prev
11:06 Active Item Slider and Create Animation Content
12:51 Effect Animation when Click Next button in CSS
15:20 Effect Animation when Click Prev Button in CSS
17:40 Create element running when slider active
18:35 Responsive
19:10 Setup Javascript
19:35 Event next button click
21:35 Event prev button click
23:14 Set Slider Auto run
Download Code and Image: www.lundevweb.com/2023/11/des...
-----
This youtube channel not only revolves around topics about website programming using HTML CSS Javascript, but also website design, ideation and implementation.
All codes are free. Sharing will help us grow faster.
#slider #carousel #css
-----
Design Slider - Carousel web: • Animation Card Slider ...
Design Template Website: • Parallax Scrolling Web...
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Effect Image using HTML CSS Javascript: • How To Make Zoom Image...
Design Animation Menu Web: • Design Navigation Menu...
Design Effect Card: • How to make Awesome CS...
There are many other series: www.youtube.com/@lundeveloper...
-----
Contact With me:
Instagram: / lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support.

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

19 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@lundeveloper 5 месяцев назад

A Slider Carousel design with crazy effects. Follow my channel to continuously update new videos every day

@jennifergraham9609 5 месяцев назад

do you know reacts.js and will like to work on a project

@abdelhakimelazaly4854 5 месяцев назад

Yes

@abdelhakimelazaly4854 5 месяцев назад

@jennifergraham9609 can you send this images to me Thanks

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

Your channel logo is my language it's மமமம....

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

i saw somany ai videos in youtube that converting figma design to html css code , is it good .please tell me i m very confused to learn web d or not

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

I love that you explain the css properties that you are using and why you are using them as you are styling the page and what their effecting in realtime. I haven't seen another youtube channel do this. That's awesome!

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

Thank you so much bro 😍😍

@lundeveloper 5 месяцев назад

The most outstanding and complete functions of a slider: Allows manipulation of navigation buttons to change the displayed image. A horizontal bar used to count down the running time of an animation. Creating an endless loop helps users click next forever but will never run out of sliders. And automatically switch slider after specified time. This design has also been made Responsive so it works well on different screens.

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

This is the best video that I have found in my life for learning html-css-js. Very clear and precise description while coding. Liked and subscribed. Thanks for the video.

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

except the ai voice, but yes other than that is great

@user-jx1ik6dg9e 3 месяца назад

I have been struggling to create a carousel for my project trying to learn from other channels but to no success till I found this channel keep up the good job your impact in the design world is felt and utterly appreciated!💯👌

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

Thank you so much bro 🥰🥰

@user-jx1ik6dg9e 3 месяца назад

Sure thing keep the videos coming@@lundeveloper

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

Well, we must admit this is very cool and the performance is super fast, without millions of rows of JS code! Thank you!

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

Thank you so much ^^

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

What a Project! Great job man!

@IzharReyes-ye7gb 2 месяца назад

This is what I was looking for. Thank you bro! new sub!

@AZ-qn3xq 3 месяца назад

Awesome job my friend! Please, more content like that!

@DanDan-kx4zv 2 месяца назад

Better than any other youtubers. Insane skill. magic code

@CromwellEdonis Месяц назад

This is such an amazing website tutorial. Thank you very much for making this. I am learning a lot just from watching.

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

Thx for tutorial, I'm learning front end for some time so I made it little different, I created array with objects inside js file and inside that objects i did put the content text / img / title etc and on slide switch i just imported that array[index]object content with setTimeout method and also used setTimeout to remove and add class active to the slider content so it loads up one after another too like on your tutorial, I think that is more efficient way so you dont put that much code inside html file. I guess there is also X more different ways to make that carousel too

@vladimiruchiha4420 4 месяца назад

finally!!! found a channel to learn some professional lvl stuff

@MR.CH34T 3 месяца назад

Amazing ❤ Subscribed Automatically☺

@user-li4kq2my5m 2 месяца назад

bro ty so much, this help my project a lot

@user-ro2ke1cs8f 2 месяца назад

Thank you brother. Great slider.

@1586jeffrey Месяц назад

Very clear tutorial, thank you. Can you extend this video and/or explain how to add click events to the thumbnails itself, so it directly opens the selected item?

@user-sl8ni2hi2l 3 месяца назад

Great Job Man, btw, the auto next timmer should be setInterval😁

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

Great job and amazing tutorial.

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

you made this tutorial 0 to 100 in few minutes XD Gretat Job btw!

@sureshantony7289 5 дней назад

Best tutorial for designing template bro, awesome stuff with crazy effects

@lundeveloper 5 дней назад

Thank you 😍

@AlexanderKrainov 4 месяца назад

Thanks, bro! really helpful

@emile28lozama 2 месяца назад

thanks I learned a lot from this video. I do have one question though, can I replace the images files with video files?

@user-eu9rf4nt9c 4 месяца назад

Very nice project bro👍👍❤️❤️

@programmingsabrina127 25 дней назад

Excellent work ! Thank you very much !

@muhammadumarsotvoldiev9555 2 месяца назад

Thank you very much! Very useful!

@renjukarmakar9925 Месяц назад

Your support to beginner developer is not decriable🥰💖, some people like you are the motivator and suppoter for us🙏. You are amazing brotherLove you😘😁

@lundeveloper Месяц назад

Thank you so much bro 🥰🥰

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

Wow, this is the greatest slider I saw!

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

Thank you 😍😍

@Vivek-qc8qo 19 дней назад

Coming here from the Kevin Powell channel , and it was overhyped shit, your content is just goldd , lucky me , i found you in early days of my front-end journey. Started learning in april itself, was unable to find any good channel but you are ❤❤

@lundeveloper 19 дней назад

Thank you so much ❤❤

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

Wt man 🔥 🤯 This is crazy I didn’t even think about this that i can also do this😭. Thankyou dev 💕 I am subscribing you ❤

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

Thank you so much 😍😍

@UnfazedMindzet 5 месяцев назад

It's stunning brother....🎉❤ Please create a stunning portfolio website also brother... Merci à toi.

@lundeveloper 5 месяцев назад

Of course there will be 😍😍😍 Thank you brother 🥰

@osoningliztili6708 5 месяцев назад

cool, I like it so much. it is responsive, so awesome. thank you very much

@lundeveloper 5 месяцев назад

Thank you so much brother 😍😍

@hwapyongedouard 5 месяцев назад

bro i needed this a lot . thank you , upload cool stuff like bro

@lundeveloper 5 месяцев назад

Every project I upload, I try my best to do the best I can. Thank you for supporting my channel 😍😍

@olegivanov6231 5 месяцев назад

Outstanding job, bro 👍 very inspiring.

@lundeveloper 5 месяцев назад

Thank you so much bro ❤️❤️❤️

@iambatman1124 5 месяцев назад

@@lundeveloper hel

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

Amazing! Thank you!

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

Looks great. The downside I find with sliders/hero images is on mobile they only look good if the main 'character' in the image is in the center, otherwise you just see a forehead, half a keyboard, an eyeball, some dudes ankles etc.

@joellogbo952 2 месяца назад

Great job! I don't understand how you're adding the next and prev carousels to the carousel class.

@user-wv3ir9bp7f 5 месяцев назад

cool idea and very inspiring. hope this channel can get bigger and more famous, Is this okay if i use this to add this function to my project?

@lundeveloper 5 месяцев назад

Of course. You can use it. ❤️ Thank you so much ❤️

@user-wv3ir9bp7f 5 месяцев назад

@@lundeveloper thank you so much 💜

@chahatmanchanda1536 Месяц назад

Great work. But i wanna know, how these images are of so small sizes with such a good quality? What tool you used for that?

@85MA Месяц назад

amazing work! complete website tutorial requested plz

@AlbanDoku11 27 дней назад

thank u very much for your effort 💗

@tumaleed5701 4 месяца назад

Very good ❤

@LuizCarvalho-oq4gq 3 месяца назад

A huge thanks for your work and I must say that you did a great job in this one. I'm trying to do the same here, but instead of using divs I'm using semantic tags and following your steps, but unfortunately it isn't going so well. Instead of using divs for list and item I'm using and to do the job, I know that I should change some property about the display of the list but I don't really get what it is. Could you tell me more or less what I should change?

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

I'm glad you watched the video and it's great to use it in your own way. The ul and li tags are special tags because they already have several attributes such as (padding, margin, list-style-type). If you want it to look like a regular div, first set the values above to 0 and none before doing anything

@LuizCarvalho-oq4gq 3 месяца назад

@@lundeveloper Thank you sir, I'll try my best over here and aply this. Again, thank you a lot.

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

Excellent brother, can you do this but with videos and not images?

@RivaNNaaa 2 месяца назад

It is amazing job🙏

@albertocabello7914 2 месяца назад

This example is fantastic. I'm implementing it in a project I have in Angular, but I get this message when I try to call another form from the "See More" button. I can see this in the console ERROR TypeError: Node.appendChild: Argument 1 is not an object.

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

Well done

@Moviezoneee794 Месяц назад

great video...can i please know where you downloaded these high quality pictures

@cleberlimacls Месяц назад

Hi. Great content. Tks. I'm a self-taught beginner in front end so, sorry for this question. When you code in CSS ".carousel .list .item .content .author" isn`t the same as just ".author"? A bit confused to me

@user-pi2td8bt8s 3 месяца назад

Hero sir ❤

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

Really very nice!

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

Amazing job subscribed.

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

Thank you so much brother 😍😍😍

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

Awesome, subscribed! Thanks

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

Thank you 😍😍

@LifeofPets1 5 месяцев назад

man you are legend , learning a lot from u . love ur work

@lundeveloper 5 месяцев назад

Thank you bro 😁😁

@petejones2168 Месяц назад

Hi Lun Dev, i love the carousel. I am wondering how i could add swipe functionality so that it is more intuitive on mobile.

@petejones2168 Месяц назад

i know that i need to incorporate event listeners for swipe (which only work on mobile). just not sure how to incorporate

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

thanks for this man. super clean! has anyone experienced any issues with choppy animations with the showImage keyframe on mobile out of interest? I seem to be getting that atm - and on safari on mac too. Chrome runs smoothly though. Macbook Air M2, iPhone 15 pro

@michaelraymondlegg210 2 месяца назад

have you had an issue with the thumbnail and positioning in mobile browsers ? I find it says one thing in dev tools and does a complete different thing in mobile browsers.

@TegaMetitiri Месяц назад

Great video🙌

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

Amazing!

@Himanshu-ud9sg 3 месяца назад

Bro which theme and plugins You are using for in vscode

@aphrodisgarrix4243 2 месяца назад

That was really really amazing. but first things first. What do you drink?

@siddharth7994 9 дней назад

Bro You Are Awesome but I have question what is Pointer event what happens if it is not applied.

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

dope

@user-ro2ke1cs8f 2 месяца назад

Thank you

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

brother amazing videos but pls get a mic

@-Anubhab 8 дней назад

1:10 rather than pressing the button scrolling would be efficient. BTW thanks for teaching

@xxdobstarggxx73 5 месяцев назад

Cool, where did you find the animals images 👏

@lundeveloper 5 месяцев назад

You can find a lot of good quality animals images at "pexels page"

@xxdobstarggxx73 5 месяцев назад

@@lundeveloper Thanks a lot

@briannguyen2464 5 месяцев назад

a có thể làm video giống như vậy mà làm với reactjs được không a?

@Titan-ey2wj Месяц назад

thank you so much for this video. can we use the code on a real project and deploy it for public as a real company project?

@lundeveloper Месяц назад

Of course

@user-yj7wi8py7l 2 месяца назад

@Iundeveloper Can you please provide me the link to where you get those images that you used in this tutorial 🙏🥰

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

Đẹp thật😄

@user-kl5my6ix4n 3 месяца назад

Butiful

@michaelraymondlegg210 2 месяца назад

Hey I've downloaded your repo and when actually using it on mobile it isn't responsive, try it it out, how can we encounter for the mobile browser UI squishing it towards the top?

@Pavan-735 21 день назад

Is it possible with figma plugin as well

@sandipshaw7268 2 месяца назад

How to remove the top bar animation of orange line which is every time showing from right to left. Pls help and also share the logic behind the scenes.

@Mrpakistan907 5 месяцев назад

Nice Bro

@lundeveloper 5 месяцев назад

Thank you bro 😘

@AarzooGupta Месяц назад

Thanx for this video. I tried the codes as per video but Brother It's not running or not even showing any transition, I have re-checked the codes....All is fine but still not running, Can you please help....

@Deepson-jv8ht 2 месяца назад

where do you get these crazy images from?

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

z-index 100, nice

@Saiyan412 Месяц назад

It's good but,i am facing problem with animation,like animation applied on author, but it wasn't working over tittle and topic and buttons,idk what's problem

@thibautkouame1721 2 месяца назад

great !

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

nice !

@Youtuber_Toan 5 месяцев назад

em vẫn hóng anh làm video tiếng việt

@lundeveloper 5 месяцев назад

🫣🫣🫣🫣

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

i love the way you explain in your videos .. but i faced a problem on js I copied the code twice cause i want to make more than but the arrows only respond on the first one the second one didnot respond

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

Please try using my code provided in the description of this video

@MohamedTarek-kl5hf 2 месяца назад

how you made you visual studio code like this

@vivid4379 15 дней назад

Amazing effects bro but can you convert JS to React JSX is video code

@lundeveloper 14 дней назад

of course, All effects are created using CSS, to capture user action events just change the word javascript to react js

@travailensa3338 5 месяцев назад

top top top top 💯 💯 💯

@lundeveloper 5 месяцев назад

😘😘😘

@MohamedTarek-kl5hf 2 месяца назад

please put a video about your theme

@user-ox4or2dj1i 3 месяца назад

Where do you find such a cool HD images

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

Hi. You can find a lot of images HD at "pexels page"

@user-ox4or2dj1i 3 месяца назад

@@lundeveloper thanks very much I will be your subscriber for a long time ☺️

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

Thank you so much 😍😍😍

@Cult_Of_Gamers Месяц назад

i just subbed coz there is a download link

@1ervane 16 дней назад

How could I achieve something like this but with the WP query loop? Thanh

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

Can i know the theme name you're using in visual studio and in current video

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

This is a theme I customized. You can visit my page to watch the step-by-step customization video

@natanardianoiswardhana284 5 месяцев назад

Is this okay for commercial use?

@lundeveloper 5 месяцев назад

Of course. You just need to replace the images that are suitable for commerce

@sandipshaw7268 2 месяца назад

How to remove the orange colour animation of top of the page which is showing every time from right to left.

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

Hlo Sir. I want to learn, Can u help me pls?

@teenageapocalypseusa5368 18 дней назад

Does tailwind have enough built in classes to replicate this?

@lundeveloper 18 дней назад

Of course, tailwind can completely do it

@teenageapocalypseusa5368 18 дней назад

@@lundeveloper Fantastic!

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

Necesito ayuda, podrías ayudarme? Hago los pasos hasta el carrusel, pero la imagen queda más pequeña que en tu video y el div de carrusel queda muy separada de la imagen 1. No sé muy bien el porqué

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

parece ser el .carrusel, que al poner tus parametros me jode todo, porque podria ser?

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

no dije nada, /div estaba mal cerrado sere idiota xD