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 ❤❤❤
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!
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
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.
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 ❤✨
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.
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!
Warning ⚠️!!The title of the video is not a clickbait! Bro is really delivering what he is promising in the title
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 ❤❤
I mean its unbelievable that you dont need to write a bunch of LOC to make the slider...Hats off👍🙌
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!
best web creator i have seen in my life keep it bro
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
Ur briliant developer
Bro you use which theme in vs code I really like it
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🔥
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
King web dev never seen these solutions ❤
Time to change my coding mindset ... and the JS documentation
Your videos are also unique 🎉
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
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
Быстро и круто! Пригодится
Amazing slider and soo soo simple. Thanks man. Liked as always.
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.
I love your videos, they are so simple and break down the concepts amazingly.
Thanks for comment 😍😘
Love your content, cant wait for the next awesome trick!!!!
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.
@@AJ-Pixelyze 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.
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!
that's great. You always help me to make projects bro 🔥🔥🔥
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..
yeah you can do it to with only display:block based on active index . and use index = (index + 1) % array.length
Awesome! Now add transitions and we're all set!
It is very helpful, thanx a lot❤️
Which browser you are using because last mock up are great and i also want to test my website responsiveness
Keep posting all these dude❤
Wow, I learned something new today
you dont have to upload everyday, but every 1 hour😁
What an idea sir ji 👏👏👏👏
How to change the mobile or tab background? Do you have used which software
Amazing bro btw which theme are you using?
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 ❤✨
Great 🎉
this is amazing i was trying to simplify slider but you did it like hold my beer
Amazing!!! Thanks a lot
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.
which theme you used in visual studio code
Can you share what extension used in the last to check responsiveness.
Thanks man came first to watch this 😅❤
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.
thanks
Good One... Can you tell me what's that extension in which you see responsiveness ?
Mobile simulator - responsive testing tool
Bro it is amazing video for me and i want to know which extension you used to view on different devices in this video 😊
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
Awesome!
thanks bro u done a huge favor
please also do animation using framer-motion
awesome info, thx
Thanks man that's interesting.. how do we make the slider move smoothly?
Very good L'un dev❤
At 4:37 is that an extension? Those phone sizes, i know the dev tools has it but this one looks different
Sir please make a website that no one thought so as a college student we can practice some really new project
thanks i want this video highly appreciate your content and poo voice in editing🤣
bro can you talk about Rive !! , i love your content ❤
Very cool video, thanks,🤟💪. But how to add smoothness or animation when changing slides using such a slider implementation?
What about transition for slides ?
I've a question: Can I make this slider with no button for phone-mode?
is it possible to work with other tags? or just an image? ill experiment later if its work. 😅
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.
What is that tools to test responsive screen?
Can we animate the transition on this logic?
Hi, could you make a video how we can handle the hover effect on mobile devices?
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?
Try using Audacity to clean up the audio a little bit, it sounds distorted.
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 😐 😥😥
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
What is that chrome extension that shows the page inside a phone, tablet, etc?
Mobile simulator - responsive testing tool
@@Hieupv2412 thanks!
Did this channel had more videos? On the banner it is 2000+
you can also use index and then % on it and can you show us how to apply animation to this
Crazy Developer ☠️☠️
Good vl
Awesome
Thanks bro 😍
Nice video ❤❤❤
What are you using to emulate all those devices?
BTW awesome video!
it's a extension named as "Mobile simulator - responsive testing tool"
where is that community post ? or how can i join ?
You will see it as soon as you click on my youtube page
Sir please create one project on react js and using the vite framework ❤❤
Hey, whats the IDE theme?
Why don't you make a course end front end development in detail?
how can i add a transition on this function ? :(
So how can we animate it after click?
We just need to create animation moving from left to right or vice versa for the first and last item with CSS
I love you bro ❤
Can you do detail playlist beginniler ti advance three js
Js god❤
Can you make a video about a modern border raduis style ? Please 🥺
Threejs ??
Can you share this code
👏👏👏
Main issue is that it's lacking animations :x
Ok, cool
bruh you sent me back to optimise my slider
Where were you 2 days ago 😭😭
me at the end of every lun dev video: What the fuck?
doesn't those images have copyright situations
man, no comment :)