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 ❤❤❤
god, thank you man, it was so easy to do, chatgpt gave me solution based on width 100% etc, it wasnt good for me, as i wanted to change whole DIV which is not 100% width, but your solution makes it perfect !
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!
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.
``` ```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
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
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 ❤✨
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. 💌💌💌
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.
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.
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?
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.
Next video will continue to be about three JS, it will be a truly impressive video 😁😁
Gosh, a slider without sliding, incredible!
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
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
god, thank you man, it was so easy to do, chatgpt gave me solution based on width 100% etc, it wasnt good for me, as i wanted to change whole DIV which is not 100% width, but your solution makes it perfect !
Este es el vídeo que definitivamente estaba buscando, me encanto mucho, gracias por subir este tipo de contenido
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
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 😅
I mean its unbelievable that you dont need to write a bunch of LOC to make the slider...Hats off👍🙌
yeah you can do it to with only display:block based on active index . and use index = (index + 1) % array.length
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.
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
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
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
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???
Ur briliant developer
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 the fireship graphics.
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
King web dev never seen these solutions ❤
I love your videos, they are so simple and break down the concepts amazingly.
Thanks for comment 😍😘
Time to change my coding mindset ... and the JS documentation
Love your content, cant wait for the next awesome trick!!!!
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 !! 👏
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 😍
Thank you for your videos and the effort you put into them! Best regards!
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 ❤✨
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 😊
Amazing slider and soo soo simple. Thanks man. Liked as always.
I see you 😍
Thanks man came first to watch this 😅❤
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.
great work. But now how can you do it that it is no longer an infinite slider?
that's great. You always help me to make projects bro 🔥🔥🔥
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.
Your videos are also unique 🎉
It is very helpful, thanx a lot❤️
Love it. Thank you!
Sorry bro, I am just able to give one like 😢 , your content is next level 👌 💯 👍 😌
Which browser you are using because last mock up are great and i also want to test my website responsiveness
this is amazing i was trying to simplify slider but you did it like hold my beer
Bro it is amazing video for me and i want to know which extension you used to view on different devices in this video 😊
Very cool video, thanks,🤟💪. But how to add smoothness or animation when changing slides using such a slider implementation?
What an idea sir ji 👏👏👏👏
thanks bro u done a huge favor
please also do animation using framer-motion
Wow, I learned something new today
Keep posting all these dude❤
love you sir
At 4:37 is that an extension? Those phone sizes, i know the dev tools has it but this one looks different
bro can you talk about Rive !! , i love your content ❤
thanks i want this video highly appreciate your content and poo voice in editing🤣
Can we also add transition animations to it?
Wow, Thanks alot bro, btw which emulator are you using in chrome
Thanks man that's interesting.. how do we make the slider move smoothly?
Thank You Lun Dev Code .....
Amazing bro btw which theme are you using?
Omg 😮😮😮😮❤❤❤, it took 5 years to me to reach you finally I can sleep peacefully now 😢😢😢❤❤❤
Thanks bro ❤❤❤
Awesome! Now add transitions and we're all set!
Can you share what extension used in the last to check responsiveness.
Amazing!!! Thanks a lot
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..
you can also use index and then % on it and can you show us how to apply animation to this
Bro you use which theme in vs code I really like it
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.
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,...
Try using Audacity to clean up the audio a little bit, it sounds distorted.
How we can add a animation on this slide like a slide or fade animation.Do we use css or javascript for the animation?
Great 🎉
Sir please create one project on react js and using the vite framework ❤❤
Hi, could you make a video how we can handle the hover effect on mobile devices?
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.
How to change the mobile or tab background? Do you have used which software
you dont have to upload everyday, but every 1 hour😁
Can you make a video about a modern border raduis style ? Please 🥺
awesome info, thx
Awesome!
Good One... Can you tell me what's that extension in which you see responsiveness ?
Mobile simulator - responsive testing tool
Very good L'un dev❤
is it possible to work with other tags? or just an image? ill experiment later if its work. 😅
Sir please make a website that no one thought so as a college student we can practice some really new project
Nice video ❤❤❤
Great vid!
Thanks bro ❤️
Fantastic
What is that tools to test responsive screen?
How did you do the button css?
which theme you used in visual studio code
Thanks ❤
Did this channel had more videos? On the banner it is 2000+
What about transition for slides ?
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 are you using to emulate all those devices?
BTW awesome video!
it's a extension named as "Mobile simulator - responsive testing tool"
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 😐 😥😥
Can we animate the transition on this logic?
I love you bro ❤
thanks
Why don't you make a course end front end development in detail?
Awesome!
I tried it with opacity, visibility, and transition, the NEXT items are getting the transition but the PREV items are not, any idea why?
please share your code here lets analyze it
@@iamarbazmulla I tried to share the Codepen link, but RUclips is not allowing it.
@@tanim_mahbub write you codepen username and your id. Then we can assemble the link
Can you do detail playlist beginniler ti advance three js
@4:37 what is that on the right?
I found it. Mobile simulator .