Play and Pause in Infinite Slider with CSS Only
Vložit
- čas přidán 6. 09. 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.
![How to Create Complete NFT Marketplace Website Using React JS [Mobile Responsive ]](http://i.ytimg.com/vi/x8Shp663F0E/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 .
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 😍
I'm a beginner and still learning. I find this really useful and it's really good. Keep up the content!
@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 😍😍
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
Your css skill is unmatched. I'm impressed.
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!
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
Bro's channel is a treasure for developers
Thank you very much, I hope my videos are useful
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....
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 🥹🥹
I understood the video without translation. Your English is beautiful.
It's ai
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 😍😍😍
This guy is a gem💎
Protect him at any cost.
Thank you so much 😍😍
Using mask-image to fade-in fade-out items is amazing!
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 ❤
You are an amazing teacher!
Best explained infinite slider on CZcams. 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
Your css skill is amazing!!!
Recommand translate than left
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.
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
You earned a new subscriber! AI voice or not your CSS explanation is 🔥, so glad I found this channel! Thank you!
Sick!! So glad I discovered your channel 🙌
Thank you so much ^^
O M G!! amazing css master I just found!
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!!!!
Mind-blowing stuff! 🎉🎉 Thank you for taking time to create beautiful designs and share your wisdom! ☺️
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?
slider with CSS only is insane, keep up the good work 😍
very useful thank you for making these css only videos please make more!
best channel explaining css, exited to see more content from u
and thanks for posting the codes
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 !
Your stuff is awesome. Been sharing it with other dev friends of mine.
we have got Mr. Beast of Dev world
Best video bro , just wanna know some card animation if you can taught us❤
You have the most impressive and useful css skills
Thank you bro 😍
I loved this idea
Thank you bro 😍
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.
Ho can I have all items of the slider be visible immediately on page load, instead of them first animating in from the left and then repeating?
Now, Thats a tutorial. GREAT
blown 🤯🤯🤯 I'd also appreciate if you can share your VS Code extensions with us.
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?
Great technique! Thank you for the great content❤What you think about making a video to show the responsiveness side?
I want a complete course on CSS animations and design as like you do in your videos. Can you please provide it?
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.
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
Please also share how you get your design resources. Do you design it yourself? If so please do make tutorials on that as well.
awesome work brother
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!
how did you do that ? the text and image in backdround only the face part text is lighten and only showing text border
text border
I created two identical texts, the black text is behind the image, and the border-only text is in front of the image.
@@lundeveloper do you have any tutorial for that
Gracias por compartir tus conocimientos Lun
Muchas gracias
can you make a video mastering css grid and flex box?
Yes, I Will
very good in explaining your code 🤩
Thank you 😍😍
Hello !! What a tutorial, realy cool !!
Where do you find all your nice images?
You kick ass!
Very helpful!
Great work and explanation🥰🥰
Great work
Superb content
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
Great 👍🏼😃
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.
Thank You Lun DEV.
Thank you 😍
you are pro player of Css😅😅
Thank brother 🤭🤭🤭
this was really good
The fact that you don't put a space between your selectors/property declarations and your opening curly brace { absolutely kills me. 😵
thanks for the lecture, but is difficult to comprehend
You are 💎
Impressive 😊
Thank you 😍
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...
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
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
excellent
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 ?
thanks Mr. Beast for this tutorial
😮😮🤩😍
Ủa cái này là a nói đó hả, xịn thật sự
can you please teach me how to create a background shifting effect when we hover over a particular image of a slider? when we hover over a particular image , the hero section must change its background , which is the same background as in the slider. I just got this idea while watching this video, and tried but... not working. please help me.
Amazing 🫂
Mr Beast 🤔☠️🗿
AI generated voice
@@TechBoldy yea I already understood it
dude, how can you get the same voice
@@TechBoldy I agreed
What if you wanted to have all items visible on first load, and not moving in from the right the first time?
MrBeast?😮
How to control the gap between each items, I want to make the gap smaller
Please publish this to NPM and I will use it
Wow
css god
can you please tell me where do you get your assist, like the model and the logos?
why is mrbeast teaching me CSS?
because it's AI generated voice
@@takacszsolt4940 no shi- sherlock
Thank you
😍
i cant figure out how to assign the position variables to each of the images in react man please help...
hay @lundeveloper man your tutorial is good .but i wanted to add text instead of jpg , i try to do it but sometimes text goes to new line as its length is long i try to ply with other properties but nothing happens, can you tell me what should i change so that i can use text instead of image
wonder if you could just make the animation happen on container and not individual items
hay quá anh ơi🥰
Cảm ơn nhé nhé 😍
wow
my div and image tags appear in different line , is there a setting to make it wrap in one line
why not animation-direction: reverse; ?
❤❤❤❤❤❤❤❤
😍
Can you please please use react and do this I tried it but it’s been two days and it’s not working
How can you set the sider to be "filled" with child elements from the start of the animation, rather than outside of the parent div? I don't want the slider container to be empty on page-load, but filled with the appropriate content.
Check out my latest video, I dedicated a video to this topic
@@lundeveloper link to video?