Play and Pause in Infinite Slider with CSS Only

Подписаться 112 тыс.

Просмотров 75 тыс.

50% 1

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.

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 219

@lundeveloper 4 месяца назад

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 3 месяца назад

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

@kad6448 2 месяца назад

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

@bhaveshxrawat 3 месяца назад

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 3 месяца назад

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

@diegoandresmoralesfranco6581 3 месяца назад

No es reponsive

@lundeveloper 3 месяца назад

Don't worry, this design of mine is automatically reponsive

@lundeveloper 4 месяца назад

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

@savagemotiv 4 месяца назад

We need more unique hero section designs

@muthukumar604 3 месяца назад

Reddit comment section

@calvintai8950 3 месяца назад

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 3 месяца назад

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

@matiasromera330 3 месяца назад

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

@hlulaniisaacritshuri5354 4 месяца назад

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

@lundeveloper 4 месяца назад

Yeah, thank you so much bro 😍😍

@theether5993 3 месяца назад

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 3 месяца назад

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

@miladganjali1440 3 месяца назад

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

@yut0032387 3 месяца назад

Your css skill is unmatched. I'm impressed.

@jit-r5b 3 месяца назад

you're genius but I hate this AI voice, it's driving me nuts

@aminkamrani2690 3 месяца назад

why is mrbeast teaching me CSS?

@takacszsolt4940 2 месяца назад

because it's AI generated voice

@aminkamrani2690 2 месяца назад

@@takacszsolt4940 no shi- sherlock

@tiffari8259 3 месяца назад

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

@trainerdevesh 3 месяца назад

Mr Beast 🤔☠️🗿

@TechBoldy 3 месяца назад

AI generated voice

@trainerdevesh 3 месяца назад

@@TechBoldy yea I already understood it

@evi1ginx67 3 месяца назад

dude, how can you get the same voice

@SaifulIslam-ql6eb 3 месяца назад

@@TechBoldy I agreed

@HAMZANADEEM-v4t 2 месяца назад

I want a complete course on CSS animations and design as like you do in your videos. Can you please provide it?

@MrSofazocker 3 месяца назад

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?

@shaleen9434 3 месяца назад

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?

@samuelmovies1289 4 месяца назад

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 4 месяца назад

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

@samuelmovies1289 3 месяца назад

@@lundeveloper do you have any tutorial for that

@ZakariaTEKNIS 3 месяца назад

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!

@newwwidentity 12 часов назад

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)❤

@MdSaad-m7m Месяц назад

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.

@raphischnell 6 дней назад

That is what i am wondering too!

@bhaveshxrawat 3 месяца назад

we have got Mr. Beast of Dev world

@AJINVR- 3 месяца назад

Bro's channel is a treasure for developers

@lundeveloper 3 месяца назад

Thank you very much, I hope my videos are useful

@jmr1920 4 месяца назад

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

@lundeveloper 3 месяца назад

Yes, I Will

@ariesrabbit 5 дней назад

your knowledge just deep dive about css, and simply explain everything, that awesome

3 месяца назад

anh chuyển qua làm content tiếng Anh làm em hơi lú @@

@ssygon2 Месяц назад

I once tried to remove hardcoded --position for those div slides, to use counter() instead. Alas, i could not get it to work coz --position never changes 😂 7:36 Similar like this .list { counter-reset: var(--position); } .list .item { counter-increment: var(--position); } .list .item::before { content: counter( var(--position) ); } 8:11 animation-delay: calc( var(--quantity) * (var(--property) - 1) ); Wonder if @property counter can be used? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UwNERAV-OiU.htmlsi=KgoEIRm9f_SZtFTB 7:45

@Jim49267 3 месяца назад

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

@swaztik4972 3 месяца назад

It's ai

@retromania526 14 дней назад

@@swaztik4972wait what????

@jean-marcfraisse7191 19 дней назад

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? 🤔

@islammomen8400 Месяц назад

The divs are shaking/juggling as they scroll, anyone facing this problem, any solution for it?!!

@GiuseppeMinisteriofswing Месяц назад

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!

@Ezekiel889 3 месяца назад

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

@lundeveloper 3 месяца назад

Thank you so much bro 🥹🥹

@SEUNGTAEKKIM Месяц назад

Your css skill is amazing!!! Recommand translate than left

@artfox3903 16 дней назад

Sorry man, i tried my hard to watch some of your videos, they seem really interesting and good, but i can't for the love of god stand this AI voice, it is so annoying, i don't wana hear it anymore, i'll subscribe just in case one day this will change

@jagritmondal8144 Месяц назад

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.

@iamsomewhere Месяц назад

The fact that you don't put a space between your selectors/property declarations and your opening curly brace { absolutely kills me. 😵

@GenZBikram 2 месяца назад

From where you have learnt this and how many years you're working with css🙂 plz reply

@HarshDoes 3 месяца назад

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

@lundeveloper 3 месяца назад

Thank you so much 😍😍

@alexon2010 Месяц назад

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?

@dew_ama Месяц назад

hey guys, let's give this guy 1m subs!!! and 1m likes to this comment

@PicSta 3 месяца назад

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

@DarioCapizzi 11 дней назад

I noticed that the gallery made in this way has an annoying flickering effect.

@simranpreetkaur3161 Месяц назад

@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

@CosmacCreation Месяц назад

Best video bro , just wanna know some card animation if you can taught us❤

@ModderorWot-ci1zj Месяц назад

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

@kaustubhudamale9803 Месяц назад

i cant figure out how to assign the position variables to each of the images in react man please help...

@jee0806 3 месяца назад

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

@jaktojestzajeta 3 месяца назад

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

@ellyeroms-qy1ym 10 дней назад

I love your content, but how will it pause on a mobile phone 🤔.

@FPI23 9 дней назад

Its like finding a formula to cure cancer.

@ARLIH2007 Месяц назад

How to control the gap between each items, I want to make the gap smaller

@wamxmonster3297 3 месяца назад

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

@rukmenip7028 2 месяца назад

May I know Where do you download all the images from?

@rahul9704 3 месяца назад

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

@ElNicopewpew 3 дня назад

i love the channel but hate the ai voice, sorry.

@kxppy610 Месяц назад

hey bro, what vscode theme are you using?

@rashidbazzoun733 3 месяца назад

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

@ZenoSamaOmniKing 3 месяца назад

broooo your website name LUN DEV 🤣🤣🤣🤣🤣🤣🤣🤣😂😂😂😂😂😂😂

@matiasromera330 3 месяца назад

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

@azulamazigh2789 2 месяца назад

why not animation-direction: reverse; ?

@chickennuggies0242 3 месяца назад

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

@lundeveloper 3 месяца назад

Wao. Thank you so much 😍😍😍

@hkseditz9720 3 месяца назад

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

@abhisekgupta1543 3 месяца назад

MrBeast?😮

@tanmoybiswas8882 2 месяца назад

Can you please change the AI voice tone.

@motivate_now108 11 дней назад

Hello Sir your video was amazing but i am unable to understand english 😭😭😭😭

@zubae_afroze 9 дней назад

Yohoho Puzzle pirates sounds lol

@pexeixv 3 месяца назад

Please publish this to NPM and I will use it

@USTAD1212 17 дней назад

you r the great bro. Start a CSS course man.

@darkalpha2107 25 дней назад

Damnnnn man! That was an amazing one. Love the way you explained it ❤ (and u got urself one more subscriber hehe)

@lundeveloper 25 дней назад

Thank you,I'm glad it was helpful ❤

@parthshinde5655 2 месяца назад

broo where doo u get all thoes graphicsss

@yasa433 3 месяца назад

Where can I get sponsor logos easily?

@nichtsooft 11 дней назад

Great approach! BUT: What if the list-items do not have the same width? 🤔

@nichtsooft 11 дней назад

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?

@matiasromera330 3 месяца назад

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

@lundeveloper 3 месяца назад

Of course, the drag and drop operation must use javascript

@TheGamer-zq6xs 18 дней назад

I never understood css that easy

@minidragonlady 3 месяца назад

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

@Way_Of_The_Light 3 месяца назад

Sick!! So glad I discovered your channel 🙌

@lundeveloper 3 месяца назад

Thank you so much ^^

@nemmen6581 2 месяца назад

you sound like mr beast

@DavidGutierrez-dj2kk Месяц назад

You are an amazing teacher!

@dankgamerthatthinkshesgood9487 2 месяца назад

is that mr beast voice lmaoo??

@prathameshshende4 2 месяца назад

why logo strip delay too much in mobile view?

@lundeveloper 2 месяца назад

In 08:08. at line 18 of code. Instead of - 1. You can replace it with - 10. At this time, there will be no delay on any device

@somedev1553 3 месяца назад

Is that mr beast AI voice?

@a062693069 3 месяца назад

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

@stormterminatorx9951 Месяц назад

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!!!!

@frnjtt-pn6wj 2 месяца назад

Great technique! Thank you for the great content❤What you think about making a video to show the responsiveness side?

@WillM-k9p Месяц назад

You earned a new subscriber! AI voice or not your CSS explanation is 🔥, so glad I found this channel! Thank you!

@zenoxdesigns1795 2 дня назад

bro loves use calc

@niazhimselfangels 2 месяца назад

Mind-blowing stuff! 🎉🎉 Thank you for taking time to create beautiful designs and share your wisdom! ☺️

@عمارالبقماء-ر7س 15 дней назад

Your theme's name?

@ajibolagenius 3 месяца назад

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

@IsotonikStudios 3 месяца назад

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

@abrowndude 3 месяца назад

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

@SoulBreacher2802 3 месяца назад

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?

@andyl9920 3 месяца назад

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

@RonnieMbugua 2 месяца назад

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

@surij8376 3 месяца назад

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

@iamsomewhere Месяц назад

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.

@lundeveloper Месяц назад

Check out my latest video, I dedicated a video to this topic

@iamsomewhere Месяц назад

@@lundeveloper link to video?