Infinite Circular Slider

Installation

npx kinetic-ui-cli@latest add infinite-circular-slider

How It Works

We arrange elements in a 3D circle by calculating the necessary angle and translateZ distance for each item based on the total number of images in the array.

Framer Motion then infinitely rotates the entire container along the Y-axis. The preserve-3d CSS property ensures that the children maintain their 3D positions in global space rather than being flattened.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { InfiniteCircularSlider } from "@/components/creative/infinite-circular-slider";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { InfiniteCircularSlider } from "@/components/creative/infinite-circular-slider";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <InfiniteCircularSlider
        images="example"
      />
    </div>
  );
}