Issues with looping an infinite carousel with a pause on hover

Design help Custom code
1

Hello Webflow gang,

I’m trying to do a few things here with this carousel and it’s starting to get a bit tricky.

  1. Looping infinitely. At about the 20s mark the icons will suddenly do a little two-step and jitter around. How do I make this more seamless?

  2. I’m also trying to get this card to pause onhover. I can get it to work on the ‘Example without Carousel Overlay’ but the Carousel Overlay is important so that it follows the design convention on other pages. It needs to blend in so that it looks good at 1920px and up. This overlay tho is affecting how the pause code works. Any ideas how to keep the blended effect as well as pause on hover?

Thanks everyone! :slight_smile:

Code for the carousel script:

<!-- Flowbase Booster - Auto Carousel -->
<style>
.carousel-l {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  /* Here you can adjust the time & speed */
  animation: carousel-animation 20s linear infinite;
}

@keyframes carousel-animation {
  from { transform: translateX(0%); }
  to { transform: translateX(calc(-50% - 12px)); }
}

.carousel-l:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}
</style>

Here is my site Read-Only: [LINK][1]

2

hi @James_Ton there is many ways how to create infinite marquee you can check ‘Made in Webflow’ if you will find example that fulfil your expectations and needs.

link is to ‘marquee’ but feel free to change filter to eg. ‘infinite marquee’

3

aye there are a few but not quite like the one I’m trying to do. I’ve tried adapting three different templates but frustratingly I haven’t been able to make it work.

The components are seamless when I copy them, but somewhere between copying them and changing the container size, and adding the image I want in – it starts to jitter.

4

hi @James_Ton there will be always a noticeable tiny glitch of few ms when loop ends. If you are not satisfied you can look for javaScript or some library. You can find some examples on codepen.io with keyword 'infinite marquee` like e.g. this one.

NOTE: always check result on published live page as designer is not reliable source truth.

5

Thanks for the ear and suggestion Stan – it’s much appreciate :slight_smile:

1 Like
6

Hi @James_Ton

I only just came across your post. I’m assuming you found a way to implement this?

If not we’ve recently created a free carousel solution that’s both swipeable and infinite. No webflow interaction are required.

You can access the cloneable here:

Take it easy,
Kane :victory_hand: