Play and Pause in Infinite Slider with CSS Only

Рет қаралды 42,437

Ай бұрын

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.com/2024/06/cre...
-----
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.

Пікірлер: 144

@lundeveloper Ай бұрын

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

@leoleo-nf3zu 16 күн бұрын

I’m new to coding so can anyone tell me why use - - width etc instead of just width?

@theether5993 19 күн бұрын

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

@lundeveloper 18 күн бұрын

Thank you very much, looking forward to your support of the channel in the future 😍

@lundeveloper Ай бұрын

Please give your suggestions for the topic in the next video 😍❤❤

@savagemotiv Ай бұрын

We need more unique hero section designs

@muthukumar604 28 күн бұрын

Reddit comment section

@calvintai8950 25 күн бұрын

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.

@luizarnoldchavezburgos3638 24 күн бұрын

Is there any possibility to see all the images when you load?

@matiasromera330 12 күн бұрын

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

@tiffari8259 29 күн бұрын

I'm a beginner and still learning. I find this really useful and it's really good. Keep up the content!

@ZakariaTEKNIS 14 күн бұрын

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!

@hlulaniisaacritshuri5354 Ай бұрын

Your coding style is always straightforward. I have gained knowledge from your tutorials. Continue the great work bro!!😅❤️‍🔥

@lundeveloper Ай бұрын

Yeah, thank you so much bro 😍😍

@yut0032387 9 күн бұрын

Your css skill is unmatched. I'm impressed.

@bhaveshxrawat Ай бұрын

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.

@Tormentor60 7 күн бұрын

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

@basharh6763 24 күн бұрын

slider with CSS only is insane, keep up the good work 😍

@a062693069 23 күн бұрын

Using mask-image to fade-in fade-out items is amazing!

@abrowndude 7 күн бұрын

very useful thank you for making these css only videos please make more!

@timothyharrison5105 20 күн бұрын

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.

@Way_Of_The_Light 18 күн бұрын

Sick!! So glad I discovered your channel 🙌

@lundeveloper 18 күн бұрын

Thank you so much ^^

@Ezekiel889 20 күн бұрын

for me, that's one of the best tutorial channels about web dev on youtube...love it... keep doing what you do

@lundeveloper 20 күн бұрын

Thank you so much bro 🥹🥹

@PicSta 15 күн бұрын

Best explained infinite slider on KZfaq. 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

@chickennuggies0242 Ай бұрын

It’s 2am, I should be going to bed but your content is so good. Thank you for sharing your knowledge!

@lundeveloper Ай бұрын

Wao. Thank you so much 😍😍😍

@matiasromera330 12 күн бұрын

O M G!! amazing css master I just found!

@user-hm1ld3bg3g 29 күн бұрын

Great work and explanation🥰🥰

@Jim49267 Ай бұрын

I understood the video without translation. Your English is beautiful.

@swaztik4972 25 күн бұрын

It's ai

@loulou81400 13 күн бұрын

Hello !! What a tutorial, realy cool !! Where do you find all your nice images?

@HowTO-lq7pg 8 күн бұрын

Great work

@lazy-hero. 9 күн бұрын

Superb content

@ajibolagenius 8 күн бұрын

blown 🤯🤯🤯 I'd also appreciate if you can share your VS Code extensions with us.

@WuToriToriwu 11 күн бұрын

Very helpful!

@bhaveshxrawat Ай бұрын

we have got Mr. Beast of Dev world

@neverold6781 16 күн бұрын

Great 👍🏼😃

@hdlrpnzr Ай бұрын

Gracias por compartir tus conocimientos Lun

@lundeveloper Ай бұрын

Muchas gracias

@user-tq2yq5wr5y 6 күн бұрын

this was really good

@AJINVR- 20 күн бұрын

Bro's channel is a treasure for developers

@lundeveloper 20 күн бұрын

Thank you very much, I hope my videos are useful

@lakshaychauhan9190 23 күн бұрын

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 ?

@szaboistvan7517 4 күн бұрын

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

@lundeveloper 4 күн бұрын

Of course, Everything can be solved with mathematics

@mdan.___ 20 күн бұрын

very good in explaining your code 🤩

@lundeveloper 20 күн бұрын

Thank you 😍😍

@ninjatechstudio 15 күн бұрын

excellent

@surij8376 15 күн бұрын

Please also share how you get your design resources. Do you design it yourself? If so please do make tutorials on that as well.

@Mahmud.R.Farhan Ай бұрын

Thank You Lun DEV.

@lundeveloper Ай бұрын

Thank you 😍

@andyl9920 24 күн бұрын

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

@robertwallace5498 Күн бұрын

You have the most impressive and useful css skills

@lundeveloper Күн бұрын

Thank you bro 😍

@HarshDoes Ай бұрын

This guy is a gem💎 Protect him at any cost.

@lundeveloper Ай бұрын

Thank you so much 😍😍

@julianvelandia1668 Күн бұрын

I loved this idea

@lundeveloper Күн бұрын

Thank you bro 😍

@exotreus 25 күн бұрын

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

@lundeveloper 25 күн бұрын

Thank you so much, I will guide about it in the next video

@exotreus 25 күн бұрын

@@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.

@robertodepasamonte3434 Ай бұрын

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?

@lundeveloper Ай бұрын

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.

@ntloc1964 29 күн бұрын

Ủa cái này là a nói đó hả, xịn thật sự

@pedroriveralopez8566 20 күн бұрын

Amazing bro! How you do that hero with the letters in transparency with the image? or its only a complete image?

@lundeveloper 20 күн бұрын

Hello everyone, please watch the latest video I posted recently. I guided everyone to create it

@okon1624 27 күн бұрын

thanks for the lecture, but is difficult to comprehend

@rashidbazzoun733 8 күн бұрын

can you please tell me where do you get your assist, like the model and the logos?

@user-vh9rj3kz4t 29 күн бұрын

Impressive 😊

@lundeveloper 27 күн бұрын

Thank you 😍

@shaleen9434 18 күн бұрын

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?

@IsotonikStudios 28 күн бұрын

How to do this but with an elementor head in where the font size means the whole text is much wider than the screen?

@jee0806 7 күн бұрын

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

@compton8301 22 күн бұрын

Wow

@i33o7dot9 23 күн бұрын

thanks Mr. Beast for this tutorial

@HaiPham-sm3xc Ай бұрын

hay quá anh ơi🥰

@lundeveloper Ай бұрын

Cảm ơn nhé nhé 😍

@nodeguru7663 6 күн бұрын

Amazing 🫂

@miladganjali1440 Ай бұрын

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

@MrSofazocker 12 күн бұрын

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?

@ahmedahmedx9600 27 күн бұрын

hi please what is the theme you are using ?

@hkseditz9720 16 күн бұрын

my div and image tags appear in different line , is there a setting to make it wrap in one line

@rahul9704 7 күн бұрын

What if you wanted to have all items visible on first load, and not moving in from the right the first time?

@SoulBreacher2802 26 күн бұрын

Can anyone explain how to achieve this type of design using css? I mean the thing going on with the text looks cool. masking or something?

@ShivamUchiha 22 күн бұрын

wow

@justinoneill2837 23 күн бұрын

wonder if you could just make the animation happen on container and not individual items

@BeHappy-cb2np 29 күн бұрын

Thank you

@lundeveloper 29 күн бұрын

😍

@nipunshah1373 27 күн бұрын

What is the theme of code editor ??

@jmr1920 Ай бұрын

can you make a video mastering css grid and flex box?

@lundeveloper Ай бұрын

Yes, I Will

@blue-sneko4675 Ай бұрын

❤❤❤❤❤❤❤❤

@lundeveloper Ай бұрын

😍

@pexeixv 9 күн бұрын

Please publish this to NPM and I will use it

@agentwolf1818 24 күн бұрын

how to add vars in markup in JSX?

@samuelmovies1289 Ай бұрын

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

@lundeveloper Ай бұрын

I created two identical texts, the black text is behind the image, and the border-only text is in front of the image.

@samuelmovies1289 Ай бұрын

@@lundeveloper do you have any tutorial for that

@_mohammed_ayaan_6387 29 күн бұрын

mR BEAST

@jaktojestzajeta 10 күн бұрын

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

@wamxmonster3297 15 күн бұрын

Can you please please use react and do this I tried it but it’s been two days and it’s not working

@user-tq2yq5wr5y 6 күн бұрын

where do you get the code

@yasa433 23 күн бұрын

Where can I get sponsor logos easily?

@abhisekgupta1543 26 күн бұрын

MrBeast?😮

@blackweb-1403 6 күн бұрын

you are pro player of Css😅😅

@lundeveloper 6 күн бұрын

Thank brother 🤭🤭🤭

@nested9301 29 күн бұрын

It's called a marquee

@matiasromera330 12 күн бұрын

And if we want to make it draggable? In that case we need to use javascript? thx!

@lundeveloper 12 күн бұрын

Of course, the drag and drop operation must use javascript

@minidragonlady 27 күн бұрын

Xài AI gì clone giọng mrbeast vậy thím ....

@coderoyalty Ай бұрын

quality: 1000%

@lundeveloper 29 күн бұрын

You should not do so, because it will cause the distance of the items to be very far apart.

@coderoyalty 29 күн бұрын

@@lundeveloper ooh,,, was rating your tutorial...

@lullimongal Ай бұрын

Build a full frontend website

@dankgamerthatthinkshesgood9487 17 сағат бұрын

is that mr beast voice lmaoo??

@luobohu-dx9xv Ай бұрын

What's the best way to fix start blanks, and refresh blanks

@lundeveloper Ай бұрын

At 8:11, css line 18. Instead of -1, you can replace it with - var(--quantity). This will cause the animation to fast forward past the first loop, thereby losing the initial space