A modern, minimalistic, lightweight React carousel component built with TypeScript
npm install glide-react

Official npm package: glide-react


A modern, minimalistic, lightweight React carousel component built with TypeScript, hooks, and functional components.
- šÆ TypeScript First - Full type safety with strict interfaces
- ā” Modern React - Built with hooks and functional components
- š Infinite Scrolling - Seamless looping with clone-based approach
- š± Touch/Swipe Support - Native touch gestures for mobile
- šØ CSS-in-JS Ready - Inline styles for critical layout, customizable via className
- š„ļø SSR/Next.js Compatible - Hydration-safe with fallback rendering
- šŖ¶ Lightweight - No external dependencies beyond React
- š¦ Small Bundle - ~50KB ESM bundle
``bash`
npm install glide-reactor
yarn add glide-reactor
pnpm add glide-react
Import the default styles (optional):
`tsx`
import 'glide-react/dist/glide.css';
// or import the theme variant
import 'glide-react/dist/glide-theme.css';
`tsx
import Glide from 'glide-react';
function MyCarousel() {
return (
slidesToScroll={1}
infinite={true}
dots={true}
arrows={true}
>
Props
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
slidesToShow | number | 1 | Number of slides visible at once |
| slidesToScroll | number | 1 | Number of slides to scroll per navigation |
| infinite | boolean | true | Enable infinite loop scrolling |
| speed | number | 500 | Transition duration in milliseconds |
| autoplay | boolean | false | Auto-advance slides |
| autoplaySpeed | number | 3000 | Autoplay interval in milliseconds |
| dots | boolean | false | Show dot indicators |
| arrows | boolean | true | Show prev/next arrows |
| fade | boolean | false | Use fade effect instead of sliding |
| vertical | boolean | false | Vertical slide mode |
| centerMode | boolean | false | Center the active slide |
| centerPadding | string | '50px' | Side padding in center mode |
| rtl | boolean | false | Right-to-left mode |$3
| Prop | Type | Description |
|------|------|-------------|
|
beforeChange | (current, next) => void | Called before slide change |
| afterChange | (current) => void | Called after slide change |
| onInit | () => void | Called on slider initialization |
| onSwipe | (direction) => void | Called on swipe end |$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
className | string | '' | Additional CSS class |
| dotsClass | string | 'glide-dots' | Dots container class |
| prevArrow | ReactElement | null | Custom previous arrow |
| nextArrow | ReactElement | null | Custom next arrow |
| customPaging | (i) => ReactElement | null | Custom dot renderer |
| appendDots | (dots) => ReactElement | null | Custom dots container |Ref Methods
Access slider methods via ref:
`tsx
import { useRef } from 'react';
import Glide, { GlideRef } from 'glide-react';function MyCarousel() {
const sliderRef = useRef(null);
return (
<>
{/ slides /}
>
);
}
`$3
| Method | Description |
|--------|-------------|
|
prev() | Go to previous slide |
| next() | Go to next slide |
| goTo(index, dontAnimate?) | Go to specific slide |
| pause() | Pause autoplay |
| play() | Start autoplay |Responsive Settings
`tsx
slidesToShow={4}
responsive={[
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
}
]}
>
{/ slides /}
`Custom Arrows
`tsx
function CustomPrevArrow({ onClick }) {
return ;
}function CustomNextArrow({ onClick }) {
return ;
}
prevArrow={ }
nextArrow={ }
>
{/ slides /}
`Styling
The component uses inline styles for critical layout. You can customize appearance via:
1. className prop - Add your own classes
2. Built-in class names - Style
.glide-slider, .glide-track, .glide-slide, .glide-arrow, .glide-dots, etc.
3. Custom components - Use prevArrow, nextArrow, customPaging, appendDots`MIT