# React Slick — Carousel Component for React Applications

> A React wrapper around the Slick carousel library providing responsive slides, lazy loading, and swipe support for building image and content carousels.

## Install

Save in your project root:

# React Slick — Carousel Component for React Applications

## Quick Use
```bash
npm install react-slick slick-carousel
```
```jsx
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 3 };

<Slider {...settings}>
  <div><h3>Slide 1</h3></div>
  <div><h3>Slide 2</h3></div>
  <div><h3>Slide 3</h3></div>
</Slider>
```

## Introduction
React Slick is a React port of the popular Slick jQuery carousel. It provides a declarative component API for building responsive, touch-enabled carousels with features like autoplay, lazy loading, and custom navigation.

## What React Slick Does
- Renders responsive carousels with configurable breakpoints
- Supports infinite scrolling, autoplay, and fade transitions
- Provides swipe and touch gesture support for mobile devices
- Enables lazy loading of slide images for performance
- Allows custom prev/next arrows and dot indicators

## Architecture Overview
The library wraps each child element in a slide container and manages a track element that translates horizontally or fades between slides. Responsive settings are applied via a breakpoints array that maps viewport widths to slide-count configurations. The internal state machine handles animation timing, swipe velocity, and edge snapping.

## Self-Hosting & Configuration
- Install both react-slick and slick-carousel as dependencies
- Import the slick CSS files for default styling
- Configure via props: slidesToShow, slidesToScroll, autoplay, speed
- Use responsive prop array for breakpoint-specific settings
- Access slider methods via ref (slickNext, slickPrev, slickGoTo)

## Key Features
- Responsive design with per-breakpoint configuration
- Swipe and drag support out of the box
- Lazy loading with onLazyLoad callback
- Center mode for highlighting the active slide
- Variable width slides for mixed-content carousels

## Comparison with Similar Tools
- **Embla Carousel** — Lightweight and extensible; React Slick offers more built-in features
- **Swiper** — Framework-agnostic with 3D effects; React Slick is simpler for basic carousels
- **Keen Slider** — Smaller bundle size; React Slick has broader community adoption
- **Nuka Carousel** — Pure React; React Slick wraps the mature Slick engine
- **Splide** — Accessibility-focused; React Slick has a larger plugin ecosystem

## FAQ
**Q: Why do I need both react-slick and slick-carousel?**
A: react-slick provides the React component; slick-carousel supplies the CSS styles and assets.

**Q: How do I handle dynamic slide content?**
A: Wrap dynamic children normally. Call slickGoTo(0) after data changes if you need to reset position.

**Q: Does it support server-side rendering?**
A: Yes, but wrap the Slider in a client-only boundary if you encounter hydration mismatches.

**Q: How do I customize arrows?**
A: Pass custom React components via the nextArrow and prevArrow props.

## Sources
- https://github.com/akiran/react-slick
- https://react-slick.neostack.com/

---
Source: https://tokrepo.com/en/workflows/asset-2ba5c5ea
Author: AI Open Source