How To Make An Infinite Autoplay Slider

[@benjybarkes9430]

This is brilliant. I've spent the whole day trying various solutions in different videos and none of them are as simple and as easy to implement as this. Many many thanks.

[@prakashmandal5924]

lol same

[@empiregaming3675]

I am searchig from 3 days and finally got it Thanks bro

[@abhikb]

Man You are just awesome 🙏 , this video just cleared my doubts and helped me a lot . I subscribed to your channel , I am sure you will make amazing content in the future

[@faizahmed8034]

Thank you so much, i was really looking for this and couldn't find any content on the topic seeming like a common feature.

[@everything_Ola]

Thank you alot. This really helped me. I have been looking for a solution for some while now but none of them quite explained it as well as you did. Thank you

[@MatiUllahZahir]

short & great multi image slider video

[@umutcoskun4247]

Wow, this really worked like a charm!

[@aramdonyaee9801]

You are brilliant. Your tutorial helped me so much and I really appreciate your work. Keep up creating great videos like this! 👏👏

[@tristanrd3398]

thank you man you save my day ! keep the good works, congratulations from france

[@michelpomerantzeff1749]

Brilliant! It works like a charm

[@LidyaSimon-x9p]

Thank you so much, it helped me a lot 👏

[@Magic_of_code]

thanku so much for givin this video it is very simple and easily we can understand

[@minzin4463]

Very well done! I would just want to add that you should add the first image on top of the duplicated, because the image might take a bit to load

[@MW-TR]

This was a huge help, thank you!

[@prasadcode58]

it helped me a lot, thanks bro

[@renends7615]

Incisive explanation. Great video! Thanks for the video!

[@ericdimarzio5756]

Awesome video! Subscribed!

[@amuslimintheusa]

That's greate! Love this work. Thank you so much

[@evaniveson]

Great solution! Love the code without JS!

[@muazzambhatti1672]

thanks alot, this was exactly what i needed

[@unabrella]

thanks for this! super easy to follow along, keep it up!

[@vinijill1622]

Thank you so much! It works beautifully... You're amazing... Hope to see more contents soon...

[@ayushgupta2537]

is there a way,so that user could scroll left and right too?

[@wassiham4234]

Hi, can you send me the code, mine don't work !!!

[@albertawuah53]

The HTML code is not clear. Would you mind sharing the code file for download?

[@MagicalTalesTV001]

Kindly go to settings on KZbin and go to advance and select 1080px then go back to your video and enjoy this blessed animation video. God bless the coder

[@DQuranJar]

Hello! thank you for this.. quick question, when it reaches the last image, will the first image moved to the next of the last image?

[@YxK112]

that's also my question . it's not infinite

[@teknofis2604]

You're the Man!

[@calibbt5656]

Awesome! Thank you for sharing.

[@micayokpon6706]

Awesome tutorial

[@lovindigital]

You are my life saver!

[@Unknownlady-p7p]

Very useful video❤

[@trendpulse-g5]

Awesome tutorial! Loved it.. It was really helpful.

[@yuri_boyka89]

Thank you for the Simple code and effective. But the images are not repeated. Is there any modification possible, so images will be infinite?

[@ericdimarzio5756]

Change the timing of of the transform animation; the part that comes after the * in the translateX(calc...etc. I made mine a little longer and synced it so that the second cycle matched the 1st cycle of photos when it reset.

[@adityazhafirdhiaulhaq7308]

thank you, it was really helpful.

[@estebanbechelli8432]

Thanks ! It's a great solution !

[@bobbuilder7143]

Nice video short and sweet

[@lucasareco9338]

Awesome tutorial my friend! Thank you for sharing all your knowledge with us. I have a simple question, what is the name of the background song?

[@TechyTro]

Your video as helped me a lot to solve what I seek for, thanks for it

[@LiveLifefact]

Bro , can you help me in this code ? My code is not working properly

[@kathreena]

hi, i wanna add this in the middle of my website.. may i know what should i change the to? .. hope u could help 🙏🏻🥺

[@juanchadev4519]

Brillant, thanks for instruction !!

[@bedtimehorrorstoryyoutube]

Thank you helped alot!

[@marioc485]

Great Video! thank you 🥰

[@AsimYilan]

Hi danke fürs Video. Ist es möglich das die nächste Runde gleich hinter dem Ende beginnt?

[@william.darrigo]

this worked awesome!

[@valentinabastidas7659]

La animación se vuelve brusca cuando termina y vuelve a empezar porque el navegador tiene que "saltar" de la posición final de la animación (translateX(-100%)) a la posición inicial (translateX(0)) de golpe. Una forma de suavizar esta transición es utilizando la función animation-direction y estableciendo su valor en alternate. De esta manera, la animación se invertirá cuando llegue al final y volverá a empezar en la dirección opuesta, lo que creará un efecto de "rebote" más suave: .slide-track { display: flex; width: calc(250px * 28); animation: 50s slides linear infinite alternate; } @keyframes slides { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } by: Blackboxai

[@tbuday]

Thanks for the video! My animation is not scrolling automatically, sjust stands still. In Chrome I used -webkit- for both animationa and @keyframes but still nothing. Anyone knows the answer?

[@mareksamofal3929]

Awsome!!! thank you so much ❤❤❤

[@justaguywholikeshentai9019]

this is wonderful , ty love

[@Arjun_Tiwari]

it,s just amazing bro 👍👌

[@georgeseletski8241]

hey! Nice video.

[@naufalhelmisausan6631]

I re typing your html code but it doesn't work, i barely using xampp but still doesn't work, i use vscode app i scan the error, nothing error notification

[@UshaC-et8ce]

Hello! This is simple and easy to understand. Please share the code because it is not too much of visible actually.

[@MagicalTalesTV001]

Kindly go to settings on KZbin and go to advance and select 1080px then go back to your video and enjoy this blessed animation video. God bless the coder

[@HaniehSouti]

thank youuuu sooo muuch it wasss sooo helpfulllllll :))))))

[@briannguyen2464]

Thank you so much !!!

[@caiosouza2655]

Lovely, thanks!

[@devinwinando5651]

Thank you so much bro, I was stucked making these thing, I though it was using js

[@teddie9255]

Do you have the code for this posted anywhere?

[@bobruis4073]

Hi! This loops really cool! I want this but from top to bottom. How do I do this?

[@حذيفةأحمد]

جزاك الله خيرا

[@Innopro_tech]

Thanks bro ❤❤

[@JacobSeeger]

THANK YOU!!!!

[@houseofmalik9944]

It went too fast for me, do you have the html and css files I can get from maybe github? Also if you want to have right and left arrow buttons on the right and left so user can slide themselves along with the animation that would help.

[@MagicalTalesTV001]

You see the place he added overflow: hidden; don't put it and you should have what you're looking for. Or just add overflow X to the main div and see m

[@evolution6247]

Hey The Mute Dev :) I really like this tutorial and wondered if it is possible to add one specific thing: to turn the pictures into links so u can click them and get to a nother website, but the rest stays the same?

[@Shreklovesdonkey32342]

I think you can add the specific into another div, and just put a href on that image?

[@Vinomillz]

Simple i did that in my project just put the image tag inside the linking tag... eg.

[@evolution6247]

@@Vinomillz Thanks a lot!! :)

[@alirezamoradi-bt3hk]

thanks man

[@uzma8511]

This is brilliant. Any tips on what the code needs to look like if we want to create another slider just below this one? Tried giving the first and second sliders and id but no matter what I do, the second slider does not populate

[@nehlzintoonz1432]

wow, thank you for this video man, I love it, please Is there a source code for the tutorial

[@motivationforlife123]

On hover effect only one slide or image is getting pause other are moving plz help me out?

[@svarshithkumar3847]

for shadows we can use mask property right ?

[@MagicalTalesTV001]

Nop

[@rahmounioussama1624]

very easy video to do slide carousel with pure css

[@imranbiswas7400]

How does the carousel stop on hovering image?

[@ankitasapra5219]

Thanks !

[@omnomnom1323]

how about to add your examples to codepen etc?=)

[@priscilacs]

awesome 👏👏🙌

[@kashmirtechtv2948]

But i want first image exiting from left of the screen should enter from right side immediately while other images should still keep moving a they were doing.

[@MagicalTalesTV001]

Calculate the timing in seconds using keyframe

[@zocker2586]

first image is not hovering animation for some reason help

[@suavemg3089]

GOAT

[@cristianalexis7458]

Hey friend and if I want it to start again once it reaches the end and never finished??

[@MagicalTalesTV001]

Set something like: e.g Animation: autoRun 10s linear infinite; Add to your parent div and you're good to go

[@cledeniroliveira3624]

Excellent video. How do I assign this style only to the slider images, I added this code on my website and it keeps changing all the other images as well besides the ones on the slider. Doing as you did in a new file works, the problem is when you add the code to a site, where it contains several other images, this problem occurs. Can someone help me? Thanks

[@tjray3403]

put .slider then img ex. ".slider img {} "

[@akessewilfriedkouame331]

Man are you just formidable😇

[@ernndsrs4327]

Apenas CSS! Simples, fácil mas perfeito demais!!! 👏👏👏

[@evolutionpersonal7345]

Você tem esse código?

[@digitalharish907]

can we do this for end continue next slider

[@13.5coder2]

Thank you so much bro :- )

[@mikeychocho]

Ok, but it's not infinite. It doesn't repeat the whole row again

[@harbanisharma9744]

please give the source code

[@anand_dudi]

Thanks

[@selvaprakashml3688]

what is the code to move from left to right

[@BelS-u3v]

for some reason i can't seem to make it work

[@kamaljha8946]

helpful 🤗🤗

[@onepieceworld121]

What happens when last image shows up!???

[@Naresh-dev-angular-dotnet]

helpful!

[@miguelsousa483]

Awesome

[@hashmiphool]

Sir( background-image:) esmy slide k liye gallery ki pics kecy save kiye jayn gi

[@NoumanIjaz-o5c]

Can uh Plaese Give Code also?

[@userj-s2000]

Legit tut

[@sergdomina]

is this loop animation?

[@Nandibabudotcomofficial]

How to get this code ?

[@peterpineda6454]

my slide is not infinite :c

[@sylvainbousselier6875]

its a full static solution :(

[@HangugoSupporter]

hello sir in this video very best, can you give source code please

[@cutemarwadiboy]

please you give us code.

[@antox2034]

UNA LOCURA

[@madhvi1501]

Is it responsive?