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

``bash
npm install react-glide-carousel

or

yarn add react-glide-carousel

or

pnpm add react-glide-carousel
`

🛠 Usage

$3

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

`tsx
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 (

);
};
`

$3

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.

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

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

return (

goTo('prev')}>Previous
{currentIndex + 1} / {totalItems}
goTo('next')}>Next

);
};

const App = () => {
// ...
return (



)
}
`

⚙️ Props

$3

| 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.

---