Infinite Carousel Loop in Webflow (No Code Needed!)

[@christopherdickinson9092]

Hands down the clearest and easiest to follow tutorial for looping carousels!

[@eskideamos]

best webflow carousel tutorial i've seen bar none, kudos sir

[@Staff936]

This was great, just started the Web dev journey and its nice to already have a little trick in the tool box.

[@NERDYSAM]

Man I love your dedication to this channel its been over 2 years and your still going, I hope your channel grows even more😊

[@RedPantherio]

Appreciate it!

[@syedmuzzammil5739]

The best tutorial across youtube

[@itstheWampus]

stumbling upon your channel for the first time and holy piss you did a great job explaining this. Thank you sir

[@RedPantherio]

Thanks, appreciate it!

[@CentaurusRelax314]

This is gold. *_GOLD!_* Thank you. I'm really surprised that this type of feature isn't 'stock' in Webflow. It's easy to do in Wix' simple editor. I am new to Webflow and thought Webflow was going to give me *more* options, and a more efficient way toward design 'freedom,' but i'm not finding that to be true. Yet.

[@Chinaza.C]

Love the way you broke it down, thank you so much!!!

[@herrDOS]

Thank you. You can add a short line of js with code embed (to duplicate all elements) and make these logos come from a collection making it fully dynamic.

[@abirahmed1292]

Thank you very much, marquee animation is used to be achieved by coding but now thanks to you I will be able to build it on Webflow :)

[@jordankieff5561]

This was incredibly helpful. Concise, easy to follow, exactly what I was looking for. Thank you!

[@elizahepner9659]

Omg I've been hunting for this for weeks. Life saver!

[@RedPantherio]

Nice!

[@TheFlyingEpergne]

this is a great video, implemented it onto my website immediately after watching. nice job man!

[@aljosamakevic]

Great tutorial! I rarely comment on videos but felt the need to show my appreciation. Awesome work

[@RedPantherio]

I appreciate it 🙂

[@RahulYadav-yg6zh]

Subscribed! You are a GOAT! Please keep uploading more videos with no code needed

[@Liliya-q4j]

Thank you! You gave me very clear explanations of how to do it. Before that, I had a lot of problems with scrolling...

[@BryanAnderson-5280]

Thank you for such a clean and effective hack! You, sir, are talented!

[@shruthiv1823]

This video is gold. Keep it going Karr 🔥 Would love to see many more such short tutorials on Webflow and other no-code platforms.

[@godabstract]

Have an odd one, I have followed the tutorial (incorrectly I think...), when the carousel has completely moved 100%, it bounced back. So if say I want it to move left infinitely, it actually moves left for 100%, then bounces right 100%. Woudl you know why that might be?

[@godabstract]

Ahhh I've figured it out, made it harder for myself as I was practicing as I was listening and watching. If anyone else has this issue, you set the first loop to 0s duration, when I duplicated both were set to 10s. So remember to do that guys! :)

[@ezron1999]

Thank you! I had that issue

[@erdelyibalazs03]

@@godabstract I hade the same issue thank you. And also huge thanks to the creator!

[@marcvolkmann4249]

@@godabstract after changing to 0s i still have the problem. Do you have a solution?

[@ericschenkenberger6118]

Great tutorial! Our team has been using coded solutions for this, and I'm excited to see how the interaction version compares. Just a little constructive criticism - you may want to invest in a mic arm. It sounds like your mic is resting on the desk, causing those low booming noises when you type.

[@VoyagesJapan]

Amazing! Exactly what I've been looking for. Thank you!

[@Michael.........]

Thanks man, this is exactly what I needed!

[@nier3434]

Love it! If anything it'd be helpful if you could zoom in on your inputs for people on mobile.

[@aryarajasaa]

Cool one dude! You just get a new subscribers here. Thanks!

[@andy-moggo]

thanks for sharing, it was exactly what I needed it

[@oleksandrboiko554]

works like a charm. thank you!

[@AmoraCast]

THIS VIDEO IS GOLD!

[@stuart2151]

This is great! Well explained and easy to follow :) Thanks

[@avaliemedia]

Awesome video! Thanks for sharing - I've used this on the site I'm building on webflow for my client :)

[@midnightstudio3579]

amazing, keep up the good work.

[@throwaway99019]

So glad I found you! Thanks for providing this! Question, what's the best way to add text under each of the images (ie. employee headshots with their names underneath)?

[@RedPantherio]

You can add a div block instead of the images into the .logo-container element. Make the div flex vertical, and then add the image and text block elements inside it. Then you can copy/paste that div element.

[@throwaway99019]

@@RedPantherio thank you🙌

[@lanochedelaspatatas]

Love it, thank you man!

[@RedPantherio]

I just launched a new Discord community for Webflow designers. It includes Webflow assistance, portfolio critiques, business discussion, and more! Be an early member (free): discord.gg/NQqJCxjkjD

[@wn352]

Worked perfectly!!! Any chance you can tell me how to make it pause on hover?

[@bone8919]

Do you find a solution?

[@wn352]

@@bone8919 man in Framer is so much easier. I completely ditched Webflow

[@Cabzah]

Thanks for the tutorial. Also what if i want to make the same kind of content carousel but with only one logo showing at a time, how can i achieve that?

[@ColeNevinsUT]

This was so helpful. Thank you!

[@RedPantherio]

You're welcome

[@AmitSharma-bj7os]

Thanks for the tutorial, very helpful but can you create a video which shows how it should be in different breakpoints?

[@RedPantherio]

The end of the video shows how to adjust for mobile. Tablet and landscape are the same process.

[@akkashnavaneethan3194]

Very useful, thank you !

[@NickZoran]

Thank you, Sir! You got a sub for that one

[@grahamtaylornyc]

This is amazing! Thanks so much.

[@nwobuchinaunsoo]

👏 Awesome! Would love to know how to make it responsive on all screen sizes

[@RedPantherio]

Keep watching until the end, I explain 😀

[@stusmith1201]

clear and concise

[@developedbyluis]

Hey, thanks I am using this right now for a project. But for some reason, it works perfectly on Chrome and not on Safari. In Safari it has a delay after showing the first container.

[@IndraNeijs]

I tried to make the same, but a white colored one on a dark background. My loop had some jerkiness at the end, bc I changed the bg color (as said in the video) on the logo container and that didn't work out for me. To fix it I changed the color of the carousel container too. Hope this helps if needed!

[@mauritzbadenhorst3091]

Thank you - this was a great help :)

[@TadijaKasagic]

thank you,i was thinking that i will need code

[@zivschneiderful]

thank you for this video! I am curious if you have a solution for more than two groups of logos.. I have 4 containers. Thanks!

[@RedPantherio]

Possibly! I'd need to see exactly the goal - feel free to share in my Discord: discord.gg/NQqJCxjkjD

[@kristiankirilov1926]

Great stuff. A lifesaver...

[@daniellewalker7468]

Amazing tutorial! :) how would you go about pausing this on hover? thank you!

[@RedPantherio]

I've had enough people ask. I may find some time to add that feature.

[@patrickperkins1189]

This tut is perfect, but I'm getting a weird overlap from my second line of logos between breakpoints :-/ it's driving me crazy!

[@RedPantherio]

Glad it's helpful 😀. In regards to the breakpoint issue, I'd need to see a read-only share link to be able to tell what's happening.

[@patrickperkins1189]

@@RedPantherio If you're genuinely down, I'd be happy to share it with you

[@patrickperkins1189]

@@RedPantherio I just send your IG a message with the link!

[@ramiroortaalbero9973]

"It doesn't work. If I set a single action, it moves correctly for 10 seconds and then stops. When I add the second action, it stops at 50% during the preview."

[@RedPantherio]

The second action should be at a different time in the timeline than the first action and should be set to 0%. Feel free to clone the project and use the elements I created in your project.

[@ss-to7ii]

I think you might do the opposite in the video at 4:20. I might be mis understanding though. @@RedPantherio Edit: mine is working by following the video exactly but i had to do it multiple times.

[@wearejohan4360]

Hi, this is a great tutorial! But what do I do when I don't have like 5 logos but about 25 (or a long piece of text). What should I do different? Because that wouldn't be achievable unless I make the logos really small. I'm kinda stuck on that one... Thanks in advance for your help!

[@RedPantherio]

You can set the minimum width of the ".logo-container" to a custom pixel width or percentage - the carousel will still loop.

[@wearejohan4360]

Perfect! Works like a charm! :)@@RedPantherio

[@amglet0264]

Thanks for the great tutorial! I have come accross one issue while trying out different carousels. Is it possible to create a carousel loop with contents that are longer than the viewport? I have a series of 12 images I want to use for the carousel animation, when laid out next to each other, they are much wider than the viewport. When I make them stretch on x axis, they become smaller to fit into frame. Is there a way to create this carousel animation but with a longer set of images? I hope this makes sense.

[@RedPantherio]

You can set the minimum width to be longer than 100%. You can do something like 150% or just give it a set px or rem min-width.

[@victorgorovoy]

@@RedPantherio thank you man, that's helps a lot

[@sufyanijaz2065]

Wow, Incredible! 😍

[@davidfitcher2953]

crystal clear 🌟

[@1134baba]

What a great video! I also encountered an issue where I put the logo container in flex and the logos didn't stretch all the way--causing a noticeable gap between the two looping logo containers. Any advice would be amazing!

[@RedPantherio]

Generally setting the minimum width of the ".logo-container" to 100% fixes that. If that doesn't fix it, feel free to share your Webflow read-only link in my Discord.

[@davemorgang]

This is great! 🔥

[@jo69123]

thanks for this dataset g

[@kareemyoussef2304]

Cool!! added to one of my sites.. does having this negatively affect performance ? I assume it depends on the image sizes that are used... the animation runs smooth when i tested it on diff devices but im not sure how it will perform on all devices

[@RedPantherio]

It could potentiality affect page load performance since you're adding images and code is being written behind the scenes, but it's pretty lightweight.

[@iantrantham3972]

This is super helpful, but the justify option isn't there in webflow anymore. How do you do this with Webflow's new UI?

[@RedPantherio]

Should be flex --> horizontal --> space around

[@iantrantham3972]

@@RedPantherio Found it, thanks man!

[@MJK]

how can you do this but in the opposite direction? since the second logo container always goes to the right when choosing flex

[@RedPantherio]

You can switch the interaction order I gave. So the one I showed to be first at 0 seconds will be the second one. And the second one should be switched to happen first.

[@ElouanCch]

Tu gère de malade !

[@lawrencelandeloos3761]

You just saved my laptop

[@lohanerianele7837]

woooow! You saved me! Thank you for the content! If it's not too much to ask because I'm racking my brain to do it... how can I do it the same way but going to the right ? Thank you again

[@RedPantherio]

You can just reverse the actions to go from left to right. So 1st action will be 0 seconds at -100%, and then the 2nd action will be 10 seconds at 0%.

[@EdgarFayad]

Thank you for the tutorial is a great video, I just have a small question or detail. There's a size limit to the asset being fut within the container correct? If the Logo or word you decide to use si to big they start tacking up. Is there a solution to this or am I not doing something right?

[@RedPantherio]

The .logo-container can be bigger than its parent. So if it gets tight, you can just give the .logo-container a larger minimum width.

[@max-zb1io]

it used to always work but when i do it now my overflow is hidden and when the animation starts every thing that has not been in view stays hiden where did i mess up

[@RedPantherio]

I can take a look if you share the read- only link in my Discord.

[@tryoskar]

Thank you!

[@fawwazfirdaus5959]

Awesome. Auto subscribe for you!

[@linahage9397]

Hi there, when I follow your video with 10 logos, the logos start overlapping near the end of the loop as the screen size shrinks. Otherwise it’s working perfectly. Do you know how to get around this?

[@RedPantherio]

You can increase the min-width of the logo container to fit more logos in.

[@linahage9397]

@@RedPantheriothank you, but what if the min width is a percentage already set to 100% as advised in the video?

[@RedPantherio]

@@linahage9397 You can set it higher than 100% or give it a px or rem width.

[@HenochMunzimba]

What if i even have more Logos then seen on the screen. So if overflows already without the second container?

[@RedPantherio]

That's fine. It's going to move 100% of it's width, so it'll always end back at 0 to loop.

[@HenochMunzimba]

@@RedPantherio First off: Thanks for the quick reply!! Hmm maybe i don't understand. So i got a lot more Logos, so they already line up outside the viewport. If I put in Value off 100% the logo-container fits the Viewport but all the logos which are outside that Div overlapp with the second logo-container, when animated.

[@HenochMunzimba]

All Good. Got it fixed by expanding the width to 200%

[@kristijanmasevski7083]

how to fix the white line at the end of the single logo container

[@RedPantherio]

Feel free to share your read-only link in the Discord channel, and I'll try to help 🙂 (it's a bit tough to tell without seeing your actual project.)

[@joaodiogo6558]

Hey, Fantastic how to adjust to mobile version ? The logos came all toguether

[@RedPantherio]

I explain mobile towards the end of the video :)

[@Anonymous-rm2wu]

Great work, thanks! I'm having some issues if I add like 8 logos. I want them larger, but when I enlarge, they overlap each other. Any suggestions?

[@RedPantherio]

You can add a minimum width of something larger than 100%. If that doesn't work, feel free to share your read-only link in my Discord.

[@Anonymous-rm2wu]

Worked thank you!@@RedPantherio

[@hellojunej1]

Thank yo ufor the video! Does it still work the same way when you have 10+ logos? If I just put all the logos in the logo-container, they don't all sit within 100vw just because of how many there are.

[@RedPantherio]

Yes, it should still work even if the logo-container min-width is more than 100%.

[@BisonTongueDesign]

It works on mobile, but it's not showing all of the items on mobile. It only shows about three?

[@RedPantherio]

Generally the issue I see on mobile is that the min-width is too small for the .logo-container class. If that doesn't fix it, send over your read-only link in my Discord.

[@frankiereece3]

Hey there, awesome video. Im having an issue where I put the container in flex and the logos over lap eachother. Ive tried padding,margin, max/min width and i cant get it to move properly to able able to loop the right way. any advice?

[@RedPantherio]

I'd be happy to take a peek. If you can share the read-only Webflow link in the Discord channel (pinned comment above) I'll take a look. KZbin doesn't like those links sometimes.

[@frankiereece3]

@@RedPantherio awesome. just messaged you with the link on discord

[@PixelPerfect00]

Bro did you get the solution

[@Adlil]

thanks man!

[@shakeme14]

LOVE THAT VIDEO BUT IF I HAVE MORE IMAGES HOW CAN I DO IT? BEACUSE I TRIED BUT IT SEEM LIKE I AM DOING IT WRONG PLEASE HELP

[@RedPantherio]

If the images don't fit, you can increase the min-width to be something higher than 100% or even set a "px" amount instead of "%" on the .logo-container class.

[@JonathanCoutino]

Thanks for the video. I used your file and adding many logos no longer works because they overlap. What I can do?

[@RedPantherio]

Can you try increasing the size of the .logo-container?

[@JonathanCoutino]

@@RedPantherio thanks for reply :) If I enlarge the container, it doesn't apply to all screen sizes and sometimes it looks overlapping. Is there a formula? I tried the project you shared and added more logos, and I get the same problem.

[@JonathanCoutino]

@@RedPantherio Thank you, the problem I found was that I was adding padding to my images, I removed it and everything works, thank you very much

[@RedPantherio]

@@JonathanCoutino Awesome 😎

[@JonathanCoutino]

@@RedPantherio update: For it work with any number of logos you must set the width of the image instead of the height :)

[@md.shofikulislam7976]

you are awesome bro.

[@vladimirstoyanov750]

This is not working for me - not looping, not responsive for the mobile screens. Needs some more adjustments to work.

[@RedPantherio]

Feel free to use the cloneable, which is ready for you to use on your website. You can just copy/paste it into your site. Link in the description.

[@haydenwatson3988]

Im trying to do this vertically but once it reaches the start again it bounces and changes direction. Any tips??

[@RedPantherio]

Tough to tell without seeing it. Any loop will need to start at zero and end at 100% if horizontal. Not sure what those numbers will be vertically, but the idea is the same.

[@jayreambonanza1991]

I already set it to loop but it won't go back to it's initial state and will stop at the last logo of the second div

[@RedPantherio]

Can you send me the read-only link on LinkedIn?

[@jtavison95]

Brother, i need your assistance please if you can find the time. When the loop comes back around, it's not in a smooth loop, it changes the images, so it looks awful. let me know - thanks.

[@RedPantherio]

Does the animation start at 0% and end at 100%?

[@jtavison95]

sorry this was my bad. i had different logos in my duplicate 🫨 now it works fine.@@RedPantherio

[@ERICKP-h5h]

is it possible to make infinite flow card carousel from cms content? like when user input something and webflow use it as a cms data and make it card shpae and flow it infinitely

[@RedPantherio]

Yes that's possible. Would this use case be with logos or something else? Perhaps another tutorial is in hand 🤔

[@Timothee-cl5ei]

Do you know how to make it stop while i hover over it

[@RedPantherio]

I'll try to find some time to work on that feature.

[@andidemartini]

Amazing tutorial man! I just cant seem to get it right for the mobile view :/

[@RedPantherio]

Feel free to share your read-only share link in the Discord, and I can help: discord.com/invite/NQqJCxjkjD

[@SheharyarNaveed]

Does anyone know how to make it go in the opposite direction? I'm trying but it's not working properly.

[@RedPantherio]

You can follow the tutorial as I made it, but start the animation at 0% and then move it to -100%.

[@i_m_balar]

What happens if logo is more? I have more than 10 logos with 100px spacing between them. Is it possible to implement this?

[@RedPantherio]

Yes you can have the .logo-container go longer than .carousel-container by setting a higher minimum width. You'll need to remove the 100px spacing between the logos to get them to seamlessly loop, or else you'll need to do some other sizing adjustments to get that to work.

[@i_m_balar]

@@RedPantherio Yep. Worked. I used display grid instead of flex. Thanks.

[@meow-lily]

Thank you so much :)

[@reesgargi]

But if you like have 15 logos?

[@RedPantherio]

You can set the logo container to be wider than the carousel container if you have more logos.

[@Flo-AI]

does it also work if the two logo containers are different ? i think not or?

[@RedPantherio]

The loop only works if the .logo-containers are the exact same. If you want the logos to fill more than 100%, you can set the minimum width to higher than 100%, and it should still work.

[@Flo-AI]

@@RedPantherio cheers will try it out

[@Flo-AI]

works, appreciate the quick reply

[@MaiahisOrange]

Hello, is anyone getting the weird popping on mobile? The scroll works fine on desktop down to tablet but when I load the site on my phone the weird popping is happening. I tried -99.99 and -99.98 and still happening. Any advice welcome!!!

[@RedPantherio]

Feel free to share your read-only Webflow link in my Discord, and I can take a look: discord.gg/gEwtFZky

[@MaiahisOrange]

@ thank you I just shared it

[@Zmoorgekaffii158]

omg thx :D helped me a lot

[@ODoyleDesigns]

👏why thank you sir

[@PJW-fe8ms]

how can i make this in mobile..? it fully work in pc but, it's quite different to make it in MO

[@RedPantherio]

Check out @06:20 in the vid. I go over the mobile version 😀

[@staticmotion1628]

Thank you

[@developermsmahadi]

Thanks Thanks a lot for giving us a proper guideline without code☺☺ Noe please make a responsive card slider without any code. only use interaction Thanks again

[@RedPantherio]

No problem. Can you give some more info on what a responsive card slider is?

[@di_moha2278]

it is still working ? it doesnt for me

[@RedPantherio]

Yes it's still working!

[@jacobb315]

how do u make it mobile responsive

[@RedPantherio]

The end of the video explains mobile responsiveness 🙂