Infinite slider

The InfiniteSlider component creates a continuously scrolling carousel of items, perfect for showcasing icons, logos, or features.

Default

By default, the slider scrolls horizontally and repeats the items infinitely.

<InfiniteSlider
items={[
  <LogoReact size={32} />,
  <LogoVue size={32} />,
  <LogoAngular size={32} />,
  <LogoSvelte size={32} />,
  <LogoPython size={32} />,
  <img src="/logos/flutter.svg" alt="Flutter" width={28} height={28} />,
  <img src="/logos/php.svg" alt="PHP" width={36} height={36} />,
  <img src="/logos/nodejs.svg" alt="Node.js" width={32} height={32} />,
  <img src="/logos/nextjs.svg" alt="Next.js" width={32} height={32} />,
  <img src="/logos/jquery.svg" alt="jQuery" width={32} height={32} />,
  <img src="/logos/typescript.svg" alt="TypeScript" width={32} height={32} />
]}
itemClassName="filter grayscale brightness-0 text-black"
/>

Customization

You can customize the scroll speed and the styling of each item using the speed and itemClassName props.

<InfiniteSlider
items={[
  <LogoReact size={32} />,
  <LogoVue size={32} />,
  <LogoAngular size={32} />,
  <LogoSvelte size={32} />,
  <LogoPython size={32} />,
  <img src="/logos/flutter.svg" alt="Flutter" width={28} height={28} />,
  <img src="/logos/php.svg" alt="PHP" width={36} height={36} />,
  <img src="/logos/nodejs.svg" alt="Node.js" width={32} height={32} />,
  <img src="/logos/nextjs.svg" alt="Next.js" width={32} height={32} />,
  <img src="/logos/jquery.svg" alt="jQuery" width={32} height={32} />,
  <img src="/logos/typescript.svg" alt="TypeScript" width={32} height={32} />
]}
speed={25}
itemClassName="icon-blue"
/>

Usage

Import the InfiniteSlider component and pass an array of icons or logos via the items prop. You can also control the animation speed and item styles. The InfiniteSlider component can be referenced using the following format:

import InfiniteSlider from "../../components/InfiniteSlider";