# Infinite Slider

- Page: https://jiguang132.com/resources/motion-primitives/docs/infinite-slider
- Resource: Motion Primitives (https://jiguang132.com/resources/motion-primitives.md)
- All guides: https://jiguang132.com/resources/motion-primitives/docs.md

Loop a strip of repeated visual items.

## Usage guidance

Constrain host width, provide pause behavior and meaningful image dimensions; duplicated items are decorative repeats.

## Version and preflight

This source was verified with React 18.3.1, Motion 11.12.0 and Tailwind CSS 4. Inspect the target React version, stylesheet entry and existing dependencies first. Do not downgrade React automatically or mix different Motion APIs. React 19 projects require separate compatibility validation.

Isolated preview support does not justify overwriting an existing global stylesheet. Merge only required theme tokens and utilities, preserving application styles.

## Install component

JGUANG_ORIGIN is a placeholder for a verified JGuang origin serving this resource. Use the JGuang origin currently serving this resource; check its status and version before installation. Review file changes before installation; do not use --overwrite.

```sh
npx shadcn@latest add https://jiguang132.com/r/motion-primitives/infinite-slider.json
```

Direct dependencies: `clsx@2.1.1`, `motion@11.12.0`, `react-use-measure@2.1.1`, `tailwind-merge@2.6.0`. React and ReactDOM are supplied by the host project.

## Runnable examples

These identifiers map one-to-one to previews and example bundles. Each example includes its state and required support files. Start with a complete example, then adjust its public parameters.

### Basic loop

```sh
npx shadcn@latest add https://jiguang132.com/r/motion-primitives/infinite-slider--infinite-slider-basic.json
```

```tsx
import { InfiniteSliderBasic } from "@/components/motion-primitives/app/docs/infinite-slider/infinite-slider-basic";

export function Example() { return <InfiniteSliderBasic />; }
```

### Hover speed

```sh
npx shadcn@latest add https://jiguang132.com/r/motion-primitives/infinite-slider--infinite-slider-hover-speed.json
```

```tsx
import { InfiniteSliderHoverSpeed } from "@/components/motion-primitives/app/docs/infinite-slider/infinite-slider-hover-speed";

export function Example() { return <InfiniteSliderHoverSpeed />; }
```

### Vertical loop

```sh
npx shadcn@latest add https://jiguang132.com/r/motion-primitives/infinite-slider--infinite-slider-vertical.json
```

```tsx
import { InfiniteSliderVertical } from "@/components/motion-primitives/app/docs/infinite-slider/infinite-slider-vertical";

export function Example() { return <InfiniteSliderVertical />; }
```

## Interaction and accessibility checks

Test focusable controls, Enter/Space, dismissal and focus return. Check overflow and contrast on mobile and both themes. Respect prefers-reduced-motion and provide pause or static alternatives for continuous animation. The platform preview pause control belongs to the preview host; component installation does not add it automatically.

## Provenance and local changes

https://github.com/ibelick/motion-primitives/tree/120f64f6ca60348e251f929e9c81f11ccbe45eda

Retain the MIT license; packages containing the scroll-lock helper also include Adobe Apache-2.0 notices. Local adaptations restore dialog focus and replace demo artwork with authored geometric assets. See the bundled LOCAL_CHANGES.md. This is JGuang practical guidance, not a verbatim translation of upstream MDX.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt