React Glide Carousel

✨ Features

• 🚀 Smooth Parallax Effects: High-performance, jank-free sliding animations.
• 📱 Fully Responsive: Adapts perfectly to any screen size.
• 🎨 Customizable: Use the built-in controls or build your own with our flexible hook.
• ⚡ Lightweight: Minimal footprint, optimizing your bundle size.
• 🧩 TypeScript Support: Full type definitions included.
• 🖼️ Image Preloading: Smart preloading for seamless user experience.

📦 Installation

npm install react-glide-carousel
# or
yarn add react-glide-carousel
# or
pnpm add react-glide-carousel

🛠 Usage

Basic Usage

The simplest way to use the carousel is to pass an array of image URLs and use the built-in control components.

import { Carousel, NextIcon, PrevIcon, Progress } from 'react-glide-carousel';

const images = [
  "https://images.unsplash.com/photo-1...",
  "https://images.unsplash.com/photo-2...",
  "https://images.unsplash.com/photo-3...",
];

const App = () => {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <Carousel items={images} autoPlay={true} interval={4000}>
        <PrevIcon />
        <NextIcon />
        <Progress />
      </Carousel>
    </div>
  );
};

Advanced Customization

Want full control? Use the useCarousel hook (exposed via context) to build your own custom controls. Note: Your custom controls must be children of the Carousel component.

import { Carousel, useCarousel } from 'react-glide-carousel';

const CustomControls = () => {
  const { goTo, currentIndex, totalItems, direction } = useCarousel();

  return (
    <div className="custom-controls">
      <button onClick={() => goTo('prev')}>Previous</button>
      <span>{currentIndex + 1} / {totalItems}</span>
      <button onClick={() => goTo('next')}>Next</button>
    </div>
  );
};

const App = () => {
    // ...
    return (
        <Carousel items={images}>
            <CustomControls />
        </Carousel>
    )
}

⚙️ Props

Carousel

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | string[] | Required | Array of image URLs to display. | | children | ReactNode | undefined | Components to render as overlays (controls, indicators, etc.). | | autoPlay | boolean | false | Enables automatic sliding. | | interval | number | 3000 | Time in ms between slides when autoPlay is enabled. | | className | string | undefined | Additional CSS class for the root container. | | defaultSlider | boolean | false | Enables the default slider. |

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.