Infinite Carousel Loop in Webflow (No Code Needed!)
ฝัง
- เผยแพร่เมื่อ 29 ส.ค. 2023
- Learn how to create this marquee looping carousel in Webflow without writing any code.
Clone it: infinite-looping-carousel.web...
Subscribe: tinyurl.com/yckku24p
My Web Design & SEO company: www.redpanther.io
Webflow showcase: webflow.com/redpanther
Social links:
/ redpanther.io
/ 51331787
/ redpanther.io
/ redpantherio - วิทยาศาสตร์และเทคโนโลยี
I just launched a new 3D course for web designers! www.redpanther.io/courses/3d-jumpstarter
Hands down the clearest and easiest to follow tutorial for looping carousels!
This video is gold. Keep it going Karr 🔥
Would love to see many more such short tutorials on Webflow and other no-code platforms.
best webflow carousel tutorial i've seen bar none, kudos sir
This was great, just started the Web dev journey and its nice to already have a little trick in the tool box.
Love the way you broke it down, thank you so much!!!
Man I love your dedication to this channel its been over 2 years and your still going, I hope your channel grows even more😊
Appreciate it!
Subscribed! You are a GOAT! Please keep uploading more videos with no code needed
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 :)
Amazing! Exactly what I've been looking for. Thank you!
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
Thank you! You gave me very clear explanations of how to do it. Before that, I had a lot of problems with scrolling...
Love it, thank you man!
Thanks man, this is exactly what I needed!
This is great! Well explained and easy to follow :) Thanks
Great tutorial! I rarely comment on videos but felt the need to show my appreciation. Awesome work
I appreciate it 🙂
works like a charm. thank you!
thanks for sharing, it was exactly what I needed it
Omg I've been hunting for this for weeks. Life saver!
Nice!
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.
This is amazing! Thanks so much.
stumbling upon your channel for the first time and holy piss you did a great job explaining this. Thank you sir
Thanks, appreciate it!
THIS VIDEO IS GOLD!
Awesome video! Thanks for sharing - I've used this on the site I'm building on webflow for my client :)
Cool one dude! You just get a new subscribers here. Thanks!
clear and concise
This is great! 🔥
This was so helpful. Thank you!
You're welcome
Great stuff. A lifesaver...
Thank you - this was a great help :)
Thank you, Sir! You got a sub for that one
Wow, Incredible! 😍
thanks for this dataset g
Tu gère de malade !
Thank you!
Worked perfectly!!! Any chance you can tell me how to make it pause on hover?
you are awesome bro.
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.
crystal clear 🌟
Awesome. Auto subscribe for you!
omg thx :D helped me a lot
Thank you
love it
Thank you so much :)
The best!
Helpful!
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?
THANK YOUUU!!!!!
thank you
Thanks for the tutorial, very helpful but can you create a video which shows how it should be in different breakpoints?
The end of the video shows how to adjust for mobile. Tablet and landscape are the same process.
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!
Great!!
You just saved my laptop
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
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%.
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
No problem. Can you give some more info on what a responsive card slider is?
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.
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
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.
用的太他妈熟练了，羡慕。
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!
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.
how can you do this but in the opposite direction? since the second logo container always goes to the right when choosing flex
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.
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?
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.
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.
Yes, it should still work even if the logo-container min-width is more than 100%.
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
Yes that's possible. Would this use case be with logos or something else? Perhaps another tutorial is in hand 🤔
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!
You can set the minimum width of the ".logo-container" to a custom pixel width or percentage - the carousel will still loop.
Perfect! Works like a charm! :)@@RedPantherio
Amazing tutorial man! I just cant seem to get it right for the mobile view :/
Feel free to share your read-only share link in the Discord, and I can help: discord.com/invite/NQqJCxjkjD
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
Can you send me the read-only link on LinkedIn?
how to fix the white line at the end of the single logo container
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.)
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?
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.
Worked thank you!@@RedPantherio
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
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.
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?
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! :)
Thank you! I had that issue
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?
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. TH-cam doesn't like those links sometimes.
@@RedPantherio awesome. just messaged you with the link on discord
Bro did you get the solution
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
I can take a look if you share the read- only link in my Discord.
Im trying to do this vertically but once it reaches the start again it bounces and changes direction. Any tips??
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.
how can i make this in mobile..? it fully work in pc but, it's quite different to make it in MO
Check out @06:20 in the vid. I go over the mobile version 😀
I've made the carousel work but when it reaches almost the end of the first carousel, it jumps up a little bit. I've checked everything but still cannot seem to understand why.
Would you happen to know?
Tough to say exactly without seeing the project. Could be that the elements inside the carousel are wider than the logo-container element. Could also be the percentages of the animation are off. Feel free to use the cloneable, which has everything all set up already.
This tut is perfect, but I'm getting a weird overlap from my second line of logos between breakpoints :-/ it's driving me crazy!
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.
@@RedPantherio If you're genuinely down, I'd be happy to share it with you
@@RedPantherio I just send your IG a message with the link!
Does anyone know how to make it go in the opposite direction? I'm trying but it's not working properly.
You can follow the tutorial as I made it, but start the animation at 0% and then move it to -100%.
It works on mobile, but it's not showing all of the items on mobile. It only shows about three?
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.
Do you know how to make it stop while i hover over it
I'll try to find some time to work on that feature.
What happens if logo is more? I have more than 10 logos with 100px spacing between them. Is it possible to implement this?
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.
@@RedPantherio Yep. Worked. I used display grid instead of flex. Thanks.
Thanks for the video.
I used your file and adding many logos no longer works because they overlap.
What I can do?
Can you try increasing the size of the .logo-container?
@@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.
@@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
@@JonathanCoutino Awesome 😎
@@RedPantherio update:
For it work with any number of logos you must set the width of the image instead of the height :)
how do u make it mobile responsive
The end of the video explains mobile responsiveness 🙂
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.
Does the animation start at 0% and end at 100%?
sorry this was my bad. i had different logos in my duplicate 🫨 now it works fine.@@RedPantherio
But if you like have 15 logos?
You can set the logo container to be wider than the carousel container if you have more logos.
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?
You can increase the min-width of the logo container to fit more logos in.
@@RedPantheriothank you, but what if the min width is a percentage already set to 100% as advised in the video?
@@linahage9397 You can set it higher than 100% or give it a px or rem width.
like if my contents are 5 and in mobile , and my animation makes my content rotate not yet, like start content 1 and end at content 2 (not content 5) how can i fix my animation??
it should be end at content 5 and go back to -99%. but mine was end at content 2 and go back to x:0%..
Thanks for your this best content.
This could be a number of things (container parents, sizing of elements, interaction issues, etc.). I would need to see the read-only link to be able to tell what the issue is. Can you share that?
it is still working ? it doesnt for me
Yes it's still working!
This is not working for me - not looping, not responsive for the mobile screens. Needs some more adjustments to work.
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.
"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."
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.
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.
im goofy
I did this in two rows, movin the opposite direction. I can see the animation is working in previews but when I preview the page or publish, the animation is not being triggered. Why might that be? 🤔😣
Can you share a read only share link?
this video is almost impossible to watch on a tablet. menus too small
Video quality very worst
Thank you!
Thank you
Thank you!