Sliders were my nightmare, really. But because of this video it is so simple and easy for me now, i thank you very much...keep making simplified videos like this one ❤❤❤
Wow, an interesting side effect of the DOM being a tree, appending the element forces it to be removed from its original place, creating the moving effect. Very nice, what's mind-boggling is that from a javascript perspective, we expect the variable ul to be an array since you use append on it. But ul is an Element. The behavior should probably documented on MDN
That's a carousel, not a slider. But still a very informative video. I like the way you're teaching people to learn to code in unique ways rather than following the norm. Keep it up!
``` ```CSS /* get all anchor tags that are not the first item from childrens of slider*/ .slider a:not(a:first-child){ display: none; } ``` ```JS let slider = document.querySelector('.slider') let nextBtn = document.getElementById('next') nextBtn.onclick = () => { slider.append(slider.querySelector('a:first-child')); } ``` *But remember that, now the img is inside the anchor tag, and for future styles, probably you will need to change one or both elements*
Now that you are having a anchor tag, be careful with just setting display to none, because *that won't be accessible* . Take a look for *disable* and *aria-disable* and make you site even mor accessible ; P
This was really awesome. By understanding this logic I feel now that I can make a carousel according to my need because carousel is one my weak spot where I do not shine. Thank you for your videos. I really love your voice over in your videos also it really make me attentive and don't make me think twice or thrice cause I get it in the first place. Keep it up. Always waiting for your new videos. 💌💌💌
The catch is that you won't be able to apply any sort of animation or transition to this slider, because all animations and transition rely on properties and in this case, there is no property to be targeted, the element just appears in the DOM tree or disappears from the DOM tree. Thinking about it further, you could try something like @starting-style which doesn't yet have wide browser support.
Today I learned about the with id being appended and just moves. Showing the technical aspect is a masterclass. Btw, how does it fare with animation???
Can you continue this slider with animation? I think animation is a very interesting topic to cover. It can get messy and big, but to understand the basic and its simplest form would be a killer ! Very clear and good video btw !! 👏
Is it possible to add animations too with that slider? I mean that looks Perfect to use, but ig its only for low scale products, or maybe someone who is really into that effect...😊 But i wanted to do with some good animation effects too for my new project, was thinking if its doable and well u did show me a new way to do. Ig i will try this and maybe find if i can do changes to suit my style...😂 Thanks lun ❤✨
I think the biggest issue is how to animate this correctly so it slides or fades from both sides. Would be great if you can do tutorial on animation with CSS like correctly targeting the right elements and explaining the logic.
The catch is that you can't animate this or apply a transition to this. Transitions are applied to properties and this trick does not deal with any properties so oops
@@SergeyNeskhodovskiy You can't animate display none as it takes the element out of DOM so that needs to be set to visibility and what I mean by properties is child element in CSS and HTML.
I would like the ask something, Before that I love your video sir. I would like to ask why don't you use the framework like Bootstrap or tailwind css in your video?
Hey, can I know the name of the chrome extension used in the end of this video that you used to display the developed website in different screen sizes? Thank you in advance.
Can you please help with the carousel the same way? It should pause on the interactions, with time function, autoplay slide in just 5 lines. I know the same we can do in the same way.
Is there a way to get slides to fade smoothly? I tried transition .slider img { } but sadly as we work with pseudo-elements it's not working. Is there a solution I might not see?
Next video will continue to be about three JS, it will be a truly impressive video 😁😁
Gosh, a slider without sliding, incredible!
Sliders were my nightmare, really. But because of this video it is so simple and easy for me now, i thank you very much...keep making simplified videos like this one ❤❤❤
Thanks brother ❤❤
best web creator i have seen in my life keep it bro
Este es el vídeo que definitivamente estaba buscando, me encanto mucho, gracias por subir este tipo de contenido
I mean its unbelievable that you dont need to write a bunch of LOC to make the slider...Hats off👍🙌
Don't forget to like and subscribe to watch many interesting videos about programming and web design 😍
hey bro i am high school student if i learn mern that can add value to me and i can earn from it
Wow, an interesting side effect of the DOM being a tree, appending the element forces it to be removed from its original place, creating the moving effect. Very nice, what's mind-boggling is that from a javascript perspective, we expect the variable ul to be an array since you use append on it. But ul is an Element. The behavior should probably documented on MDN
That's a carousel, not a slider. But still a very informative video. I like the way you're teaching people to learn to code in unique ways rather than following the norm. Keep it up!
That’s informative 😅
As always, thanks for a new video - simple and creative. The idea of a couple answers in the end is great.
Threejs video gonna be epic🔥
Already knew this but thanks for the refresher
Love your content, cant wait for the next awesome trick!!!!
Ur briliant developer
Thank you for your videos and the effort you put into them! Best regards!
what do you think about sliders with a scrolling div and an tag?
It would be same code, just replace the Img query selectors with a
Probably it would be something like this:
```HTML
```
```CSS
/* get all anchor tags that are not the first item from childrens of slider*/
.slider a:not(a:first-child){
display: none;
}
```
```JS
let slider = document.querySelector('.slider')
let nextBtn = document.getElementById('next')
nextBtn.onclick = () => {
slider.append(slider.querySelector('a:first-child'));
}
```
*But remember that, now the img is inside the anchor tag, and for future styles, probably you will need to change one or both elements*
Now that you are having a anchor tag, be careful with just setting display to none, because *that won't be accessible* .
Take a look for *disable* and *aria-disable* and make you site even mor accessible ; P
King web dev never seen these solutions ❤
I love your videos, they are so simple and break down the concepts amazingly.
Thanks for comment 😍😘
Wow, a slider in less than 5 minutes😅 .This is why i like this chanel always a simple trick can do the work.Keep up the good work
that's great. You always help me to make projects bro 🔥🔥🔥
Love the fireship graphics.
Really you are from the best creator, i love your Channel and i was happy when i see notification
Thanks for watching my content brother 😍
What an idea sir ji 👏👏👏👏
Amazing slider and soo soo simple. Thanks man. Liked as always.
I see you 😍
Maybe if I were more concise, it would only take us 1 minute because it's really only one line of logic code 🤣
Great video as always❤,how did you develop this creative way of thinking for coding man?
long explanation better
It is very helpful, thanx a lot❤️
Your videos are also unique 🎉
yeah you can do it to with only display:block based on active index . and use index = (index + 1) % array.length
Keep posting all these dude❤
Love it. Thank you!
This was really awesome.
By understanding this logic I feel now that I can make a carousel according to my need because carousel is one my weak spot where I do not shine.
Thank you for your videos.
I really love your voice over in your videos also it really make me attentive and don't make me think twice or thrice cause I get it in the first place.
Keep it up.
Always waiting for your new videos. 💌💌💌
Thank you so much 😊
The catch is that you won't be able to apply any sort of animation or transition to this slider, because all animations and transition rely on properties and in this case, there is no property to be targeted, the element just appears in the DOM tree or disappears from the DOM tree. Thinking about it further, you could try something like @starting-style which doesn't yet have wide browser support.
Today I learned about the with id being appended and just moves. Showing the technical aspect is a masterclass. Btw, how does it fare with animation???
Time to change my coding mindset ... and the JS documentation
Variable declaration and function declaration are obvious so we will not count, we will only count the logical lines of code.
as a js easy loops it helps so much u solve my problem
Wow, I learned something new today
love you sir
Can you continue this slider with animation? I think animation is a very interesting topic to cover.
It can get messy and big, but to understand the basic and its simplest form would be a killer !
Very clear and good video btw !! 👏
Amazing!!! Thanks a lot
Omg 😮😮😮😮❤❤❤, it took 5 years to me to reach you finally I can sleep peacefully now 😢😢😢❤❤❤
Thanks bro ❤❤❤
bro can you talk about Rive !! , i love your content ❤
Thank You Lun Dev Code .....
Simplicity of this is insane! Awesome tip. Is there a way to style the transition? Maybe so it actually looks like it’s sliding?
Yes. You can use the Web Transition API to let the browser handle the transition for you, with a couple lines more.
Sorry bro, I am just able to give one like 😢 , your content is next level 👌 💯 👍 😌
Bro it is amazing video for me and i want to know which extension you used to view on different devices in this video 😊
Great 🎉
thanks bro u done a huge favor
please also do animation using framer-motion
Is it possible to add animations too with that slider? I mean that looks Perfect to use, but ig its only for low scale products, or maybe someone who is really into that effect...😊
But i wanted to do with some good animation effects too for my new project, was thinking if its doable and well u did show me a new way to do.
Ig i will try this and maybe find if i can do changes to suit my style...😂
Thanks lun ❤✨
Thanks ❤
Nice video ❤❤❤
Awesome! Now add transitions and we're all set!
Thanks man came first to watch this 😅❤
great work. But now how can you do it that it is no longer an infinite slider?
Very good L'un dev❤
this is amazing i was trying to simplify slider but you did it like hold my beer
awesome info, thx
Amazing bro btw which theme are you using?
Wow, Thanks alot bro, btw which emulator are you using in chrome
you dont have to upload everyday, but every 1 hour😁
Awesome!
Fantastic
Very cool video, thanks,🤟💪. But how to add smoothness or animation when changing slides using such a slider implementation?
Great vid!
Thanks bro ❤️
Быстро и круто! Пригодится
thanks i want this video highly appreciate your content and poo voice in editing🤣
I love you bro ❤
Sir please create one project on react js and using the vite framework ❤❤
Which browser you are using because last mock up are great and i also want to test my website responsiveness
Thanks man that's interesting.. how do we make the slider move smoothly?
thanks
Js god❤
Crazy Developer ☠️☠️
At 4:37 is that an extension? Those phone sizes, i know the dev tools has it but this one looks different
I think the biggest issue is how to animate this correctly so it slides or fades from both sides. Would be great if you can do tutorial on animation with CSS like correctly targeting the right elements and explaining the logic.
The catch is that you can't animate this or apply a transition to this. Transitions are applied to properties and this trick does not deal with any properties so oops
@@SergeyNeskhodovskiy You can animate, is just targeting the right properties.
@@Pixelyze-tech What property will we be using in this case?
@@SergeyNeskhodovskiy You can't animate display none as it takes the element out of DOM so that needs to be set to visibility and what I mean by properties is child element in CSS and HTML.
What are you using to emulate all those devices?
BTW awesome video!
it's a extension named as "Mobile simulator - responsive testing tool"
Bro you use which theme in vs code I really like it
Sir please make a website that no one thought so as a college student we can practice some really new project
Try using Audacity to clean up the audio a little bit, it sounds distorted.
Can you make a video about a modern border raduis style ? Please 🥺
Warning ⚠️!!The title of the video is not a clickbait! Bro is really delivering what he is promising in the title
I would like the ask something, Before that I love your video sir. I would like to ask why don't you use the framework like Bootstrap or tailwind css in your video?
I do use it, I always have many videos with different topics: CSS Only, Bootstrap, tailwindcss, Javascript tutorial, ThreeJs, Gsap,...
Awesome
Thanks bro 😍
Hey, can I know the name of the chrome extension used in the end of this video that you used to display the developed website in different screen sizes?
Thank you in advance.
Can you share what extension used in the last to check responsiveness.
Good One... Can you tell me what's that extension in which you see responsiveness ?
Mobile simulator - responsive testing tool
How we can add a animation on this slide like a slide or fade animation.Do we use css or javascript for the animation?
Good vl
Hi, could you make a video how we can handle the hover effect on mobile devices?
Does this approach limit the ability to animate it or is there a work around?
That is what I would like to know, I just managed to use for multiple items, however I cannot figure out how we could create a slide animation..
Can we also add transition animations to it?
me at the end of every lun dev video: What the fuck?
you can also use index and then % on it and can you show us how to apply animation to this
is it possible to work with other tags? or just an image? ill experiment later if its work. 😅
How to change the mobile or tab background? Do you have used which software
Can you please help with the carousel the same way? It should pause on the interactions, with time function, autoplay slide in just 5 lines. I know the same we can do in the same way.
Did this channel had more videos? On the banner it is 2000+
💗💗💗
Video is amazing, can u please give me the plugin name used for the responsive views
It's "Mobile simulator - responsive testing tool"
@@Warface where do I can download?
@@Warface thank bro got it in chrome webstore
@@gokulkkd Love the fact that my comment where to download got deleted...
@@Warface I don't do that 😐 😥😥
Is there a way to get slides to fade smoothly? I tried transition .slider img { } but sadly as we work with pseudo-elements it's not working. Is there a solution I might not see?
bro how you check the responsiveness of your product what extension did you use?
I'm guessing it's a Chrome extension called MOBILE SIMULATOR
What is that tools to test responsive screen?