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.
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!💯👌
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!
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.
This was very enjoyable to follow along with, really challenged me to understand the concepts whenever I would make a mistake, nearly lost it, but I got down to writing the code down and eventually figured out what I did wrong (Which you had done right, I simply missed it/ mistyped). This was the best youtube video I have seen this year, and got me yelling out of happiness when I got the project running successfully. Big memory for me, I'll treasure it
Man you are the bomb! i use to avoid animations cuz I thought it was too advanced, you make it really easy to understand to the point I feel I wasted a lot of time
I'd love to implement something similar to this just with the pictures I want. I use Elementor and have no idea how to get something similar on my website. This looks utterly amazing. Great job.
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 ❤❤
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?
It sucks that most cool designs are almost useless, because web is consumed by far with mobile devices for now. The web is going to be cool again when we get proper AR glasses that replace the smartphone.
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
Hi, thanks for the awesome video! That's I was looking for my project. But I am just wondering if I can edit your code a bit for my design layout and use the code for prototype web or actual website.
Hi @lundeveloper you have a great skills both on coding and teacher. Just a quick question I've followed everything but when I clicked the prev button the thumbnail makes 3 it didn't push the second thumbnail when I click the prev button I've compared the Prev click effects code they are the exactly the same hope you can help me to figure it out what is my mistake. All in all your the man. I will try to incorporate this slider to a wordpress plugin
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?
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
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
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.
A Slider Carousel design with crazy effects. Follow my channel to continuously update new videos every day
do you know reacts.js and will like to work on a project
Yes
@jennifergraham9609 can you send this images to me
Thanks
Your channel logo is my language it's மமமம....
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
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.
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!💯👌
Thank you so much bro 🥰🥰
Sure thing keep the videos coming@@lundeveloper
Well, we must admit this is very cool and the performance is super fast, without millions of rows of JS code! Thank you!
Thank you so much ^^
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!
Thank you so much bro 😍😍
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.
except the ai voice, but yes other than that is great
@@haizk The AI voice more understandable for non native English people
I see is as a pros
This is such an amazing website tutorial. Thank you very much for making this. I am learning a lot just from watching.
This was very enjoyable to follow along with, really challenged me to understand the concepts whenever I would make a mistake, nearly lost it, but I got down to writing the code down and eventually figured out what I did wrong (Which you had done right, I simply missed it/ mistyped). This was the best youtube video I have seen this year, and got me yelling out of happiness when I got the project running successfully. Big memory for me, I'll treasure it
Better than any other youtubers. Insane skill. magic code
What a Project! Great job man!
Wow, this is the greatest slider I saw!
Thank you 😍😍
Great Job Man, btw, the auto next timmer should be setInterval😁
This is what I was looking for. Thank you bro! new sub!
you made this tutorial 0 to 100 in few minutes XD
Gretat Job btw!
finally!!! found a channel to learn some professional lvl stuff
Thank you brother. Great slider.
Great job and amazing tutorial.
bro ty so much, this help my project a lot
1:10 rather than pressing the button scrolling would be efficient. BTW thanks for teaching
Amazing ❤ Subscribed Automatically☺
Man you are the bomb! i use to avoid animations cuz I thought it was too advanced, you make it really easy to understand to the point I feel I wasted a lot of time
You're great bro❤, I generally never commented in any video. You made me to comment first time.
Thank you 😍
excellent job ; clear and understandable. thank you.
Thank you for your effort my friend. I will follow every project of yours.
Brilliant design man! Absolutely brilliant
Thank you ^^, Currently, you can see designs similar to this video somewhere on UA-cam, this video is the source of those videos
A piece of art explanation for a gem slider
A well deserved like and subscribe
Outstanding
Thank you bro 😍
I'd love to implement something similar to this just with the pictures I want. I use Elementor and have no idea how to get something similar on my website. This looks utterly amazing. Great job.
Thank you so much
Best tutorial for designing template bro, awesome stuff with crazy effects
Thank you 😍
Thank you for the demonstrations. I am grateful you share the whole code.
Your support to beginner developer is not decriable🥰💖, some people like you are the motivator and suppoter for us🙏. You are amazing brotherLove you😘😁
Thank you so much bro 🥰🥰
Great work ❤❤❤ thank you
Awesome job my friend! Please, more content like that!
It's stunning brother....🎉❤ Please create a stunning portfolio website also brother... Merci à toi.
Of course there will be 😍😍😍 Thank you brother 🥰
You are the super coder i like you i m a big fan your
Thank you so much
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 ❤❤
Thank you so much ❤❤
Wt man 🔥 🤯
This is crazy I didn’t even think about this that i can also do this😭. Thankyou dev 💕
I am subscribing you ❤
Thank you so much 😍😍
Thank you very much! Very useful!
Very nice project bro👍👍❤️❤️
Video của bạn rất hay tôi thích nó😊, cảm ơn anh bạn!
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?
best video, i dont like the robot voice but you are an awesome programmer
Amazing! Thank you!
i like your documents which you make in simple way not with react or other good luck
great work! learned a lot. Thanks
thanks I learned a lot from this video. I do have one question though, can I replace the images files with video files?
Excellent work ! Thank you very much !
Beautiful Project.
Thank you 😍
Thanks, bro! really helpful
Amazing 🎉❤
thank u very much for your effort 💗
It sucks that most cool designs are almost useless, because web is consumed by far with mobile devices for now. The web is going to be cool again when we get proper AR glasses that replace the smartphone.
It is amazing job🙏
bro deserves a raise
Great video🙌
I like it. Ty for explain.
new subs thank you for the great content
Thank you 😍
Outstanding job, bro 👍 very inspiring.
Thank you so much bro ❤️❤️❤️
@@lundeveloper hel
amazing work! complete website tutorial requested plz
bro i needed this a lot . thank you , upload cool stuff like bro
Every project I upload, I try my best to do the best I can. Thank you for supporting my channel 😍😍
Very good ❤
No words... Awesome!
Can (should) this be replicated with gsap? Really beautiful, nicely packaged!
cool, I like it so much. it is responsive, so awesome. thank you very much
Thank you so much brother 😍😍
Awesome, subscribed! Thanks
Thank you 😍😍
Amazing job subscribed.
Thank you so much brother 😍😍😍
brother amazing videos but pls get a mic
Great job!
I don't understand how you're adding the next and prev carousels to the carousel class.
Excellent brother, can you do this but with videos and not images?
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
That was really really amazing. but first things first. What do you drink?
U r using AI to explain your code but still it makes code more understandable. 👍🏻👏🏻
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?
Of course. You can use it. ❤️ Thank you so much ❤️
@@lundeveloper thank you so much 💜
man you are legend , learning a lot from u . love ur work
Thank you bro 😁😁
awesome video bro... I want to join the community or with you people!!! wanted to learn and grow together with this channel
great video...can i please know where you downloaded these high quality pictures
Hi, thanks for the awesome video! That's I was looking for my project. But I am just wondering if I can edit your code a bit for my design layout and use the code for prototype web or actual website.
INCREDIBLE
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?
great work
Thank you so much 😍
Which app u use in visual studio to have this left window
Its Live Serve borther
@@lundeveloper thanks bro
Really very nice!
hey bro, u come from vietnam???
Beautiful
a có thể làm video giống như vậy mà làm với reactjs được không a?
Hi @lundeveloper you have a great skills both on coding and teacher. Just a quick question I've followed everything but when I clicked the prev button the thumbnail makes 3 it didn't push the second thumbnail when I click the prev button I've compared the Prev click effects code they are the exactly the same hope you can help me to figure it out what is my mistake. All in all your the man. I will try to incorporate this slider to a wordpress plugin
Hi Lun Dev, i love the carousel. I am wondering how i could add swipe functionality so that it is more intuitive on mobile.
i know that i need to incorporate event listeners for swipe (which only work on mobile). just not sure how to incorporate
Hero sir ❤
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?
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
@@lundeveloper Thank you sir, I'll try my best over here and aply this. Again, thank you a lot.
Hello bro what a piece of art
But i dont understand how to make working website
I am complete beginner please gelp and recommend me something❤❤ thanks
Amazing!
Cool, where did you find the animals images 👏
You can find a lot of good quality animals images at "pexels page"
@@lundeveloper Thanks a lot
love you bro
Can you please make it with react or next JS?
Where do you find such a cool HD images
Hi. You can find a lot of images HD at "pexels page"
@@lundeveloper thanks very much I will be your subscriber for a long time ☺️
Thank you so much 😍😍😍
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?
Of course
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
what is the VS Code theme / extension that you are using for that RGB highlighting on top of each tab?
Como consigo inserir o produto final deste tutorial no wordpress (Elementor) ?
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.
Bro You Are Awesome but I have question what is Pointer event what happens if it is not applied.