Infinite Slider

What We Are Building

An infinite slider is a continuously scrolling horizontal carousel that loops endlessly. It is commonly used to showcase logos of technologies, clients, or partners. We will build one using pure HTML and CSS with no JavaScript required.

Setting Up the HTML

Create a new component called LogoSlider.astro inside src/components/. The structure consists of a wrapper div with overflow hidden, containing a track div that holds all the logo images in a horizontal row. Add six to eight logo images using img tags.

Duplicating the Logos

The secret to a seamless infinite loop is duplication. Copy the entire set of logo images and paste them right after the originals inside the same track div. This means if you have 8 logos, the track now contains 16. When the animation reaches the end of the first set, the second set is already in position, creating the illusion of an endless scroll.

Writing the CSS Keyframe Animation

Define a keyframe animation called "scroll" that moves the track from its starting position (translateX 0%) to exactly negative 50% of its width (since we duplicated the content). The track element should use display flex to lay out logos in a row, and the animation should use a linear timing function to maintain a constant speed.

Applying the Animation Styles

Set the wrapper div to overflow hidden so the extra content is not visible. Apply the scroll animation to the track div with an infinite iteration count and a duration of around 20 to 30 seconds depending on how fast you want it to move. Add gap spacing between logos and ensure each logo has a fixed width so they are uniformly sized.

Accessibility Best Practices

Add aria-hidden="true" to the duplicated set of logos so that screen readers do not read the same content twice. Also consider adding a prefers-reduced-motion media query to pause the animation for users who have enabled reduced motion settings in their operating system.