Play and Pause in Infinite Slider with CSS Only
ฝัง
- เผยแพร่เมื่อ 27 พ.ย. 2024
- In this video, I will create an infinite slider with pause and resume functionality using only CSS, using simple, clean code that is easy to reuse and upgrade.
not just an infinite slider, through this video, let's analyze standard code together to optimize every line of code, avoiding creating bad lines of code.
Download Code: www.lundevweb....
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#slider #carousel #css
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.
![[#2024MAMA] G-DRAGON - 무제(Untitled, 2014)+POWER+HOME SWEET HOME+뱅뱅뱅+FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/Ox29z5Nf1Uk/mqdefault.jpg)
An interesting idea with just CSS, this video will also help everyone know how to code simpler, cleaner and more optimal.
Please subscribe to watch many interesting videos every day
I’m new to coding so can anyone tell me why use - - width etc instead of just width?
@@leoleo-nf3zu I know its late and you may have probably learned this , but , anything given with a preceding -- is declared as a variable. which means u can give any name , so that "width" , is just a name . For example if you initialise a variable --newvariable = 200px , and you give that value for width= var(--newvariable ) ; height =var(--newvariable ) ; the element will have a width and height of 200px .
broh how can i controll the gaps in img?
Idk but man this guy teach css way better than anyone. He explains the concept, mathematical understanding of that implementation and basic thing too. Hats off man
Thank you very much, looking forward to your support of the channel in the future 😍
Your css skill is unmatched. I'm impressed.
Bro's channel is a treasure for developers
Thank you very much, I hope my videos are useful
Please give your suggestions for the topic in the next video 😍❤❤
We need more unique hero section designs
Reddit comment section
can you make a part two for this video where on hover it doesn't only pause the animation, but also allows the user to scroll the list? Then, on unhover, the animation continues. Similar to how Perplexity's mobile app works.
Is there any possibility to see all the images when you load?
May you explain how to implement scroll drawing in a landing page? it's an interesting effect you can achieve drawing a svg image with the completion percentaje
I'm a beginner and still learning. I find this really useful and it's really good. Keep up the content!
your knowledge just deep dive about css, and simply explain everything, that awesome
you are completely awesome... first time i am saying this to any developer
@lundevloper you are amazing. I was working with CSS last from 3 years but I never saw type of CSS work. Now I learn CSS again with you. I am so glad, I got your videos on YT. a big big big thanks ! Keep it up. Thanku Very Much
Your coding style is always straightforward. I have gained knowledge from your tutorials. Continue the great work bro!!😅❤️🔥
Yeah, thank you so much bro 😍😍
I FREAKING LOVE THIS CHANNEL! Great solutions, easy to implement and understand and they're reusable to top it off. Also, CSS is amazing! I had no I idea it could do all of this, they should call it JavaCSS with all the logic it handles. LOL!
for me, that's one of the best tutorial channels about web dev on youtube...love it... keep doing what you do
Thank you so much bro 🥹🥹
Using mask-image to fade-in fade-out items is amazing!
I am impressed with this mathematical trick with CSS.
Keep going, keep making videos like this. 😅👌❤🙌
Using offset properties like 'left' is not optimal as it forces the browser to repaint the elements which is a demanding task, low-end devices might make the animation look choppy. Conder using translate property.
And also there is 0 control over the gap between the items. I have version with translate instead of left, and with customizable gap. I can't paste link on here, but if anyone is interested you can find me on codepen, username: EntropyReversed
Pen name: Infinite CSS Scroll
This guy is a gem💎
Protect him at any cost.
Thank you so much 😍😍
Wow... I just tried recreating this project.
It became clear that I really don't know much about CSS. I'm going back to learn. Especially on working calculations within CSS.
bro you got in my recommendation from couple of weeks and I was watching and learning from your random videos mostly of 'CSS Only' stuff and yeah I subed today , I can say that you explain CSS way better then anyone including basics , math behind , and logic and code structure soo well , I would love a proper video by you on topic of explaination of code , like you doo....
O M G!! amazing css master I just found!
Best explained infinite slider on TH-cam. I've seen a lot of them, so I can truly say that. If I had to give you a star rating where 5 is max., then you would get only a 4 because you missed out using a speed variable to adjust speed in the style-attribute. This is helpful to adjust speed accordingly to your item count. For instance, 10s for 100 items will look way different from 10 items. Keep up this good and high quality work, you will make your way. chúc may mắn
I understood the video without translation. Your English is beautiful.
It's ai
@@swaztik4972wait what????
You are amazing at this! Never stop, this is true value🙌🏽 The Mr. Beat voice is a nice touch too! It makes everything feel easy to absorb
Mind-blowing stuff! 🎉🎉 Thank you for taking time to create beautiful designs and share your wisdom! ☺️
You are an amazing teacher!
You earned a new subscriber! AI voice or not your CSS explanation is 🔥, so glad I found this channel! Thank you!
slider with CSS only is insane, keep up the good work 😍
best channel explaining css, exited to see more content from u
and thanks for posting the codes
Just too good!!! I really hope you make a full stack project series or something like that ....your AI explanations are better than many youtubers or courses....just subscribed!!!!
It’s 2am, I should be going to bed but your content is so good. Thank you for sharing your knowledge!
Wao. Thank you so much 😍😍😍
Sick!! So glad I discovered your channel 🙌
Thank you so much ^^
Your stuff is awesome. Been sharing it with other dev friends of mine.
very useful thank you for making these css only videos please make more!
Same idea but with a carousel that have checkboxes right and left to slide the content and minimized view with magnifying hover effect(not necessary)❤
Love your coding style, want a video on making a infinite scrolling marquee {text and icon, image only}
Your css skill is amazing!!!
Recommand translate than left
Damnnnn man! That was an amazing one. Love the way you explained it ❤ (and u got urself one more subscriber hehe)
Thank you,I'm glad it was helpful ❤
Awesome approach. A few thoughts:
- It can be handy to put the speed into an optional variable as well
- Was wondering if the reverse could be solved with a direction variable with a bit of math without duplicating the animations
- Would feel more complete if we can get rid of the white space when starting... though I guess this is a bit tricky because of the animation delay
Of course, Everything can be solved with mathematics
Regarding the white space, my solution was to subtract the number of items in the animation-delay line, instead of just 1, so mine looks like this:
animation-delay: calc((10s / var(--quantity)) * (var(--position) - var(--quantity)));
I don't know if it works on all cases but even if it doesn't, it might help
@@lulufv It worked ty bro !
@@lulufv I just knew i will find this in comments, thanks
You have the most impressive and useful css skills
Thank you bro 😍
Very nice tutorial and explanations! Your videos are excellent.
I was wondering: wouldn't "animation-direction: reverse;" work and be enough in the reverse situation? 🤔
you r the great bro. Start a CSS course man.
Thank you so much for the lesson❤
Thank for watching 😊😊
awesome work brother
Very novel approach to creating an infinite slider or marque effect. Thanks for sharing. A couple of questions: (1) how can one incorporate a variable to easily set the speed of the slider? and (2) how can automatically scale the size of the images (perhaps using the calc() function) to accommodate changing viewport sizes?
1. If you need to change the speed with a variable, you just need to create an additional --time variable like I did with quantity, then in the css, replace 10s with var(--time). 2. This slider, when you change the wifth for each different screen, will shrink itself without you needing to edit anything further.
blown 🤯🤯🤯 I'd also appreciate if you can share your VS Code extensions with us.
very good in explaining your code 🤩
Thank you 😍😍
Great technique! Thank you for the great content❤What you think about making a video to show the responsiveness side?
Gracias por compartir tus conocimientos Lun
Muchas gracias
Declaring reverse and adding var sounds like JS to me. But what do i know i aint no expert. Still learning. Learned something new today for CSS
we have got Mr. Beast of Dev world
Superb content
The video is sensational, you could make a video of this with React and styled-components, to see how it would look... What would it be like if the person used the cell phone and did the manual interaction at some point?
I want a complete course on CSS animations and design as like you do in your videos. Can you please provide it?
Great work and explanation🥰🥰
Best video bro , just wanna know some card animation if you can taught us❤
Man you are just amazing, how do you learn all this stuff
Very helpful!
Hello !! What a tutorial, realy cool !!
Where do you find all your nice images?
Great work
I loved this idea
Thank you bro 😍
Please also share how you get your design resources. Do you design it yourself? If so please do make tutorials on that as well.
Amazing tutorials so far bro, but I'm really interested in that title changing fill and color depending on the image under it. I'd love at least a short about how you can recreate that
Thank you so much, I will guide about it in the next video
@@lundeveloper Actually, you could stretch it to your usual vid length by just making a general video on interesting masks like this one. It's a great website feature, and I am sure that not only I will really appreciate it.
Amazing bro!
How you do that hero with the letters in transparency with the image?
or its only a complete image?
Hello everyone, please watch the latest video I posted recently. I guided everyone to create it
The fact that you don't put a space between your selectors/property declarations and your opening curly brace { absolutely kills me. 😵
Great 👍🏼😃
this was really good
nice video thanks
thanks for the lecture, but is difficult to comprehend
Bro, you're awesome. But I want to know how do make the animation start from the left:0; I mean when the animation starts there is big blank space. It doesn't look good to me.
That is what i am wondering too!
Ủa cái này là a nói đó hả, xịn thật sự
Thank You Lun DEV.
Thank you 😍
I really like your contents but please change the AI voice to someone else Mr. Beast's voice is for kids and entertainment most of your viewers are working-class
Its like finding a formula to cure cancer.
Why not just define only the animation-name for the reverse slider?
I am also wondering if just setting the animation-direction to reverse wouldn't do the job.
Anyway, great content!
thanks Mr. Beast for this tutorial
bro's emmet >>>>>
can you make a video mastering css grid and flex box?
Yes, I Will
good tutorial ! I have a few question regarding these infinite animations - how much of such can we use in a site and where in js engine or browser are these run ? where do theh get memory allocated etc I want to know details what to look ?
Impressive 😊
Thank you 😍
Yohoho Puzzle pirates sounds lol
excellent
you are pro player of Css😅😅
Thank brother 🤭🤭🤭
Great approach!
BUT: What if the list-items do not have the same width? 🤔
I guess in that case I need to put all items in a flex-box and animate that one which should automaticly reduce the mathematical effort. Right?
I love your content, but how will it pause on a mobile phone 🤔.
I never understood css that easy
Please publish this to NPM and I will use it
Hey i was working on a Marquee which is controlled by scroll event.Now the marquee will move to peft slide if the srcoll deltaY is +ve and vice versa,the only problem is that if the user scroll from +ve to -ve is changing the animation but i don't want the animation to stsrt again from the beginning rather i want the animation to start from where it ended.Please do you have any solution?
quality: 1000%
You should not do so, because it will cause the distance of the items to be very far apart.
@@lundeveloper ooh,,, was rating your tutorial...
MrBeast?😮
From where you have learnt this and how many years you're working with css🙂 plz reply
Please. Could you make it so the slider is not empty at the page refresh? I think it would be better if the photos were visible at start
You are 💎
You kick ass!
Hey bro Are You from Vietnam
Amazing 🫂
I'm just a starter so maybe I'm just making a dumb question. Is that robot banner an image or you had it coded?
image with png around the head. then he puts the text with code
why is mrbeast teaching me CSS?
because it's AI generated voice
@@takacszsolt4940 no shi- sherlock
It's called a marquee
How to control the gap between each items, I want to make the gap smaller
😮😮🤩😍
Mr Beast 🤔☠️🗿
AI generated voice
@@TechBoldy yea I already understood it
dude, how can you get the same voice
@@TechBoldy I agreed