Nexlide

A modern, lightweight, and fully customizable React carousel component built with Framer Motion for smooth animations and Tailwind CSS for flexible styling.

Get Started

View on GitHub

Core Features

10+ smooth animations (fade, slide, flip, zoom, bounce)

Independent caption system with custom timing New

Framer Motion drag engine with inertia & elastic physics

Native RTL architecture (Arabic, Hebrew, Persian) New

Built-in accessibility (ARIA, keyboard, screen readers)

Responsive by design with aspect ratio control

Smart image optimization (lazy loading, decoding async)

Dark mode ready (system preference detection)

Framer Motion powered for production-grade animations

Pure Tailwind CSS (zero external CSS imports)

What It Supports?

Autoplay direction control (forward/reverse) New

Multi-trigger pause system: hover, focus, drag, tab New

Infinite seamless looping with smart index wrapping

Adaptive navigation arrows (auto RTL mirroring) New

Clickable pagination dots with active states

Touch gestures with momentum snap-back

Full keyboard navigation (arrow keys) New

10+ className props for deep styling

Next.js App Router with 'use client' support

TypeScript ready with full type definitions

The best is yet to come!

Parallax • 3D • Cube • Coverflow • and more — actively in development 🚀

Installation & Usage

Installation

bash

npm install nexlide

yarn add nexlide

pnpm add nexlide

📦 Peer Dependencies

These dependencies are usually already present in React / Next.js projects:

react (>=18)
framer-motion (required)

Optional (Styling Utilities)

Nexlide uses a cn() utility internally for className merging, inspired by the common Tailwind pattern.

If you are customizing or extending the component and want to reuse this utility, it relies on:

clsx
tailwind-merge
class-variance-authority

⚠️These are already bundled within Nexlide and do NOT need to be installed manually unless you plan to use the same utility pattern in your own components.

Basic Usage

The component is a Client Component (it uses React hooks and browser events like touch gestures). In Next.js App Router, you must place it inside a file that starts with 'use client';.

tsx

'use client';

import { Carousel } from 'nexlide'

const carouselItems = [
  {
    imageUrl: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=75&fm=webp",
    title: "Incredible Mountains",
    description: "A breathtaking landscape at sunset",
  },
  {
    imageUrl: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200&q=75&fm=webp",
  },
  {
    imageUrl: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1200&q=75&fm=webp",
    title: "Vibrant Night City",
  },
  {
    imageUrl: "https://images.unsplash.com/photo-1757843298369-6e5503c14bfd?w=1200&q=75&fm=webp",
    description: "Neon and motion in the city that never sleeps",
  },
  {
    imageUrl: "https://images.unsplash.com/photo-1482192505345-5655af888cc4?w=1200&q=75&fm=webp",
  },
  // ...
];

export default function MyPage() {
  return (
    <div className="p-8">
      <Carousel
        items={carouselItems}
        autoPlay
        autoPlayInterval={4000}
        showPagination
        showArrows
        infiniteLoop
        pauseOnHover={true}
        pauseOnFocus={true}
        pauseOnDrag={true}
        animation="zoomIn"
        captionAnimation="slideBottom"
        captionDelay={0.6}
        captionDuration={1.0}
        className="rounded-2xl shadow-2xl max-w-4xl mx-auto"
      />
    </div>
  )
}

RTL Support

For right-to-left languages (Arabic, Hebrew, Persian, etc.), enable the rtl prop to automatically adapt the carousel's behavior and layout.

tsx

'use client';

import { Carousel } from 'nexlide'

const carouselItems = [ /* ... */ ];

export default function RTLPage() {
  return (
    <div className="p-8" dir="rtl">  {/* Optional: Set dir on a parent */}
      <Carousel
        rtl={true}                   // Enables full RTL support
        items={carouselItems}
        autoPlay
        autoPlayInterval={4000}
        animation="slideRight"       // Recommended for RTL, but optional
        showArrows
        showPagination
      />
    </div>
  );
}

💡The animation="slideRight" is recommended for RTL contexts as it provides the most natural directional flow, but you can use any animation type based on your preferences.

Note: If you're using Pages Router or a different React setup without App Router restrictions, you can omit `use client`;.

Demos — See Nexlide in Action

How to interact with the demos?

Hover to pause autoplay • Tab to focus • Drag to swipe • Click arrows or dots • Resize window to test responsiveness.