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!
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.
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
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.
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
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.
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?
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 ❤❤
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.
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
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.
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
I wonder what it would be like to do this same thing but instead of images, with auto-playing videos with audio activation apart from that. I think it could be a good video tutorial for the community. me pregunto como sería hacer esto mismo pero en ves de imágenes, con videos auto reproducidos son activación de audio aparte creo que puede ser un buen video tutorial para la comunidad
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.
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
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
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 😍😍
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 ^^
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.
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!
finally!!! found a channel to learn some professional lvl stuff
Wow, this is the greatest slider I saw!
Thank you 😍😍
you made this tutorial 0 to 100 in few minutes XD
Gretat Job btw!
Thank you brother. Great slider.
excellent job ; clear and understandable. thank you.
This is what I was looking for. Thank you bro! new sub!
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
Thank you for your effort my friend. I will follow every project of yours.
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
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
Thank you for the demonstrations. I am grateful you share the whole code.
Great Job Man, btw, the auto next timmer should be setInterval😁
Best tutorial for designing template bro, awesome stuff with crazy effects
Thank you 😍
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 🥰🥰
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.
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?
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 ❤❤
A piece of art explanation for a gem slider
A well deserved like and subscribe
Outstanding
Thank you bro 😍
Thank you very much! Very useful!
Great work ❤❤❤ thank you
Amazing ❤ Subscribed Automatically☺
Brilliant design man! Absolutely brilliant
Thank you ^^, Currently, you can see designs similar to this video somewhere on TH-cam, this video is the source of those videos
Video của bạn rất hay tôi thích nó😊, cảm ơn anh bạn!
i like your documents which you make in simple way not with react or other good luck
You are the super coder i like you i m a big fan your
Thank you so much
Very nice project bro👍👍❤️❤️
best video, i dont like the robot voice but you are an awesome programmer
Awesome job my friend! Please, more content like that!
Beautiful Project.
Thank you 😍
It's stunning brother....🎉❤ Please create a stunning portfolio website also brother... Merci à toi.
Of course there will be 😍😍😍 Thank you brother 🥰
thanks I learned a lot from this video. I do have one question though, can I replace the images files with video files?
Amazing! Thank you!
great work! learned a lot. Thanks
I like it. Ty for explain.
You're great bro❤, I generally never commented in any video. You made me to comment first time.
Thank you 😍
Amazing 🎉❤
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
amazing work! complete website tutorial requested plz
Excellent work ! Thank you very much !
bro deserves a raise
Great video🙌
new subs thank you for the great content
Thank you 😍
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 😍😍
It is amazing job🙏
Thanks, bro! really helpful
thank u very much for your effort 💗
Can (should) this be replicated with gsap? Really beautiful, nicely packaged!
Very good ❤
great video...can i please know where you downloaded these high quality pictures
Great job!
I don't understand how you're adding the next and prev carousels to the carousel class.
awesome video bro... I want to join the community or with you people!!! wanted to learn and grow together with this channel
Beautiful
U r using AI to explain your code but still it makes code more understandable. 👍🏻👏🏻
Excellent brother, can you do this but with videos and not images?
No words... Awesome!
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
That was really really amazing. but first things first. What do you drink?
Hero sir ❤
Como consigo inserir o produto final deste tutorial no wordpress (Elementor) ?
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.
great work
Thank you so much 😍
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.
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
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?
brother amazing videos but pls get a mic
what is the VS Code theme / extension that you are using for that RGB highlighting on top of each tab?
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
Amazing job subscribed.
Thank you so much brother 😍😍😍
Awesome, subscribed! Thanks
Thank you 😍😍
Can you please make it with react or next JS?
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 😍😍
cool, I like it so much. it is responsive, so awesome. thank you very much
Thank you so much brother 😍😍
INCREDIBLE
Which app u use in visual studio to have this left window
Its Live Serve borther
@@lundeveloper thanks bro
Bro You Are Awesome but I have question what is Pointer event what happens if it is not applied.
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.
Well done
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
Outstanding job, bro 👍 very inspiring.
Thank you so much bro ❤️❤️❤️
@@lundeveloper hel
a có thể làm video giống như vậy mà làm với reactjs được không a?
I wonder what it would be like to do this same thing but instead of images, with auto-playing videos with audio activation apart from that. I think it could be a good video tutorial for the community. me pregunto como sería hacer esto mismo pero en ves de imágenes, con videos auto reproducidos son activación de audio aparte creo que puede ser un buen video tutorial para la comunidad
hey bro, u come from vietnam???
can i use this code for commercial purpose?
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.
would it be possible to add a pause button, if so what should i write on the js?
love you bro
Amazing effects bro but can you convert JS to React JSX is video code
of course,
All effects are created using CSS, to capture user action events just change the word javascript to react js
do you provide a course to be a master of CSS ?