Creating an infinite logo carousel with pure CSS

[@firstbloodfangy6933]

Exactly what I was looking for simple and clean, I never get tired of seeing this slide. Great tutorial Robby!

[@florentgironde7279]

moi aussi

[@nunolopes8263]

Hey Robby, this is awesome!! Exactly what I was looking for... neat CSS, no Javascript even needed. Pure and simple CSS code. Keep up the great work. Thank you!!!

[@crim-son]

Can you just imagine, and ive been battling with swiper js for months on how to create fluid autoplay infinite loop carousel, you solved my problem flawlessly

[@tochimclaren]

Any time I am working on a project and I realize I need to add a js library to the project. I feel some type of way. Especially libs that does these kind of stuff.

[@natoservice3250]

for months? why, is that a huge neccesity for you

[@crim-son]

It was a requirement from work, when i did it on my own it always has bugs and glitches and layout shifts.

[@natoservice3250]

@@crim-son ok buddy good luck may god be with you and ease your work🙏

[@vaztechs]

Straight to the point. You made it so easy to understand, thanks!

The best short css trutorial I've ever seen 😊. Well explainded. Great. Looking forward to next one.👍

[@grabthisinfo1799]

So useful... In case if anybody saw a glitch when the width is more and images are less, all we need to do is copy multiple times.

[@wotok7]

Damn, I spent 1 hour and didn't find the solution until found your comment. Thanks!

[@ZakariaTEKNIS-gg4xf]

Thank you, saved my life, I was literally about to bang my head on the keyboard

[@gamersgame43]

Lol I was actually trying to fix this for like 3 hrs

[@kosceeanason5910]

After all the hassel of reading different blog posts, this is just the solution I was looking for, simple and straight forward. Thanks!

[@TheJokzer]

Wow I spent so many hours trying to make this and even did some math calculations to render them. But your solution is so much better and simpler

[@gibbardwebdesign]

Awesome tutorial Robby! Instead of adding the :before & :after tags you can also add the following css to the .logos container: mask-image: linear-gradient( var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0) ); * This will fade in from transparent at 20% on each side using the background of the container ;)

[@thegreatkeljb]

This channel is underrated Why you only have 9k subs? You deserve more sir. Thank you for this.

[@happyprod]

hhghjgjh

[@Kuyukai]

been struggling for days to find an exact tutorial, u are a life savior !!

[@affysatti8466]

thank you so much even chatgpt couldn't offer such clean code

[@Alchemist_dream]

you made it so easy , thanks , i was doing it with intersection observers and intersection ratio in javascript , after i failed i came here and saw this , thanks

[@Jpugas]

Looked for a clean and simple solution for a while, very cool way to do it. You can also use CSS Mask in place of the :before:after and a linear gradient. Thanks for sharing this!

[@MOHAMMEDKHALANDER-g1c]

No words for you sir , I just fascinated by your lecture , hats off to you sir You are teaching in next level , Thank you for such a great content sir Thank you so much for your efforts and explanation

[@dragnoedits6721]

Damn thats what i was trying for past 3 days chat gpt failed to to ths mannn love itttt you got a subscriber man

[@DKJohnDigital]

I wasn't expecting it to be this easy. Thanks man ❤

[@AkhilaPemmasani]

Thank you, I spent hours on other tutorials ,and as a beginner this was the simplest and easiest to understand and it WORKED!! Saved me more hours of frustration!

[@ASPatel-ds9jt]

This guy is so much sorted in terms of web development.......truly majestic

[@tagore4d]

THanks so much for the video... You are one of the best TEACHERS, who know's exactly what to explain for a beginner like me! You are awessom SIR.

[@bedtimehorrorstoryyoutube]

Crystal clear! Loved it!

[@bigmo23]

you are a legand man, you just made my day with this simple and efficient explanation, also thank you so so much for sharing the code, im no coder and trying to navigate my way building my website and you made me a massive help with this video and the code, thank you so much man, wish you and your family all the best 🙏🏻

[@dangriffiths7125]

Got yourself a new subscriber. Great work!

[@MarianoFrias]

Wow! This tutorial is so awesome! The concept is explained precisely and clearly. Thanks!

[@nifuroxcazidnifuroxcazid6044]

It's really cool. I have been searching this for several days.

[@davemiller302]

The second div overlay made my day. Slight skip on wide screens, but great improvement, thank you.

[@patricksweet4104]

Thank you Robby. You are truly the man!

[@t.j.5574]

Damn, you're a great programmer lol. You made that look so easy. Great teacher too.

[@olaotitoheeb3068]

You made it look super simple. Thank you!

[@soumya_das527]

In this video I got eveything , what i looking for few days. ThankYou 😁😁😁😁😍😍😍😍

[@Checkmate-www]

thank you very much sir. didn't know it could've been this easy lol

[@willianbraz1987]

That was exactly what I was looking for and you explained it so well. Thanks a lot!

[@abdullahfurkanozbek7558]

Thank you so much for the video, I didnt find that well explained tutorial or video anywhere else.

[@Ericpricing]

thanks Buddy, for the easy explanation....much love From KENYA🌎

[@PeterParker-u1n]

what a clean and clear explanation

[@janemig]

Really great and simple, works like a charm! Thanks so much!!

[@timnooteboom7752]

Great video! Thanks for this, just what I was looking for.

[@thehariskhan]

Amazing Robby! In one video you teach a lot of things

[@anirudh.s8518]

Great work man, glad i got this on my recommended.

[@aer0449]

OMG what an amazing video I loved it thank you

[@dominicdavistv]

Nice brilliant! Very well explained as well thank you, especially with the basic concepts, as i'm not a full-time coder , so I do tend to forget the basic things at times.

[@gabrielorofino3527]

Precisely what I was looking for. Thank you!

[@travellingpakistan2348]

Thank you so much man! It took me two days, not animating but finding this tutorial 😅❤

[@KevinGonzalez-fo6jt]

I Love this. And thank you for the detailed explanation 👍

[@lovindigital]

You're the best and my life saver!

[@yaregobrozek3725]

AWESOME work, man!

[@AMBROSEOthniel]

This is the best so far🎉

[@veramay8739]

absolutely amazing :) saved so much time for me. many thanks!! :)

[@briandawdev]

THANKS!, really what i ve been looking for :D

[@balaganeshsk4340]

Exactly what I'm looking for , tqsm robby 🎉

[@vincenzocristiano135]

Thanks a lot man, exactly what i was looking for!! cheers!

[@Srinath666]

Thank you man simple and perfect

[@mary_unknown]

The easiest great tutorial for begginers like me, thanks! 😄

[@PilatesinSacramento]

Nice! Pretty straight forward CSS. Thank you. I’ll likely use that!

[@abhinandanagrawal1294]

loved the video. thanks for such crisp info

[@gtry1966]

thank u sir you helped me with my deadline today! great video!

[@iamuzzalhossen]

You made it super easy! Thanks man

[@7guitarlover]

Thank you so much ! This is exactly what i was exactly looking for. I helped me a ton =) Subscribed to show my token of appreciation

[@mikesalinas6245]

my gosh what a code... this is an inspiring job... Super chingon!! Saludos desde Mx Mty

[@ThronusGuild]

thx so much for this video... its magnific, send a hug for devs on Brasil!😁

[@codingwithrobby]

Thanks for the kind words!

[@ZahidShaikh-k7r]

amazing bruh keep up the good work

[@samuelhuang4324]

Great content, thank you Robby!

[@user-sd8iy7rq4k]

Thank you very much, just what I needed.

[@udorblessing]

This was very useful for my project. Thanks

[@ekomukanga893]

You just earned my subscription.

[@DailyTuition]

Thank you. the video help me to solve the problem

[@benjaminnkem]

Exactly what I needed!

[@victorjesuscetvantescadena6500]

You are great my friend, thank you very much!!! 🤯

[@albertberezvay5845]

Brilliant! Thank you!

[@Sergio-tq5wj]

Robby, thank you very much!. I am Sergio from Argentina 👍😊🇦🇷🇦🇷

[@renanvcb]

That was amazing and super easy! Thank you!!!

[@PoolMedia]

Thanks man, really helpful!

[@cathylim2113]

This is really helpful! Thanks for your work :)

[@lukasburkhardt329]

my last logo BuzzFeed collides with the 3m of the second div, why is that so ? I put in the code in elementor

[@victoriapanidi1419]

thank you so much for this great explanation!

[@MisterSteele]

Exactly what I needed!!! thanks

[@JohnPauloFigueroa]

this is great! im going to try these so i can use it for my GHL landing page projects, i hope it is responsive when it comes to mobile view.

[@quangminhtran9968]

Very awesome tutorial, Thanks !!

[@dhruvminimal]

Helpful. Thanks for this video.

[@xyz-xc1qu]

Thanks for this useful tutorial!

[@turanpehlivan1]

A couple of issues to mention, my carousel dos not run as smoothly as yours, e.g., 1 - it jumps after it completes the loop, 2 - the fade in and out works when the position is relative but fade in from right disappears when I change position to fixed or absolute to re-position the carousel to the bottom of the page. Any feedback is appreciated.

[@alvarbuenfil7557]

If you delete the script and duplicate the "logo-slide" div you solve the problem

[@firemasterleo]

hey i know exactly the issue you are having, what you can do is this, you have duplicated the inner scroller, good, now mess around with the @keyframes slide from transform: translateX(%); }, mess adjust the percentage so that it starts exactly from where your second innerscroll will be, i hope that makes sense , instead of 0%, you can adjust it to 20% or whatever until its seamless

[@herlocksholmes-uv5qw]

@@firemasterleo I really don't understand what you mean by duplicating the inner scroller, what is it?

[@herlocksholmes-uv5qw]

​@@alvarbuenfil7557 It worked for me, thanks for the idea! 😊

[@firemasterleo]

@@herlocksholmes-uv5qw in your html, there is parent container and there is the child, the child is the one that translates right, so what i mean is duplicate the child, and mess with the( @keyframe from % ), until the first child is looping exactly from where the second child will be ,

[@oraki_pessoa]

Thank you! Great video!

[@farukweb]

Nice logo scrolling..........Great

[@robertwattner]

This is great, thanks. To do another, underneath, to the right, just set to translateX(100%) and make .logos direction: rtl.

[@extremeswami]

thanks man i copied the resources you had provided and everything came out clean on my page

[@Мойникзанят-л5б]

Спасибо большое за помощь! ваше видео спасло мой дизайн:)

[@quandiqkalbaev6198]

You helped me a lot, thanks!

[@gyiriiiii6900]

I'm having an issue where the copy of the logos is overlapping with the last logo of the 1st copy. Any suggestions? Also, is there a way to ease-in/ease-out the pause?

[@FiragosJemal]

Amazing ❤ I love it

[@WencelausMaina]

Thank you very much. This was very helpful.💯

[@streetsofafrica8445]

You're a gem!

[@NateFox88]

Hi, thank you for your video was hoping you could help me with a query.. I'm currently in the process of building a website for a course I am on. I'm 3:00 into the video you started to write .logos - I have the css data in one folder and I have another folder for my images and within that folder is another folder designated to images for the slideshow. I cant seem to find the script needed to imput into css to access this folder to continue your tutorial. The css is one folder from my root and the other folder needed is two folder from my root. How do I script this in css to be able to continue your tutorial? Really appreciate any advice. Many thanks, Nate

[@jennifernwabufo4126]

I have been struggling to do this, this tutorial made it so easy, thanks alot sir. Tho I have a little bit of problem, I tried to on hover and setting the animation play state to paused but it wasn't effective

[@imdharmeesh.29]

Great video bro!

[@ShahloBahodirova]

Robby thank you very mach very very very very very very help me

[@GHSB7462]

Thank you very much. Great Video

[@christopherbergstrom1053]

If anyone is having a problem where you have a lot of logos to cycle through and the width of each of the "logos-slide" divs are much larger than the viewport and overlapping on each other, adding a "width: max-content;" on the "logos-slide" class solved the problem for me.

[@jssecrets]

Thank you Robby 👍

[@johnmiltonlupatu5698]

So is a good video tutorial, I like it so much. Thanks to you

[@marouanebr409]

thanks a lot, that was really helpful !