react-slick

library0.31.0jsnpmunverified

react-slick is a popular React component that serves as a port of the original jQuery-based `slick-carousel` library. It provides a highly customizable and responsive carousel solution for React applications, abstracting away the underlying jQuery dependency for seamless integration. The current stable version is 0.31.0, with a cadence of regular patch and minor releases addressing bugs and supporting newer React versions. Key differentiators include its extensive feature set inherited from slick-carousel, broad compatibility with React versions (from 0.14.0 up to 19.0.0), and a strong community backing. It requires separate installation and explicit CSS imports from `slick-carousel` for its essential styling and fonts.

web-framework

npm install react-slick

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-SLICK

react-slick

web-frameworkjavascriptv0.31.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Slider

✓ import Slider from 'react-slick';

✗ import { Slider } from 'react-slick';

Slider is the default export for the main carousel component.

slick.css

✓ import 'slick-carousel/slick/slick.css';

✗ import 'react-slick/slick/slick.css';

The core CSS for slick carousel styling must be imported directly from the 'slick-carousel' package, not 'react-slick'.

slick-theme.css

✓ import 'slick-carousel/slick/slick-theme.css';

✗ import 'react-slick/slick/slick-theme.css';

Optional theme CSS providing default styling for navigation arrows and dots, imported from 'slick-carousel'.

Demonstrates a basic carousel setup with responsive behavior, dots, infinite looping, autoplay, and six simple slides, configuring common settings and importing necessary styles.

import React from 'react'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; export default function SimpleSlider() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000 }; return ( <div style={{ width: '80%', margin: '0 auto', padding: '20px 0' }}> <h2> Simple Slider </h2> <Slider {...settings}> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </Slider> </div> ); }

Debug

Known issues

gotchaStyling and fonts are not included with `react-slick` itself. You *must* install `slick-carousel` separately and import its CSS files for the slider to render correctly.

fix

Run `npm install slick-carousel` or `yarn add slick-carousel` and add `import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css';` to your project's entry point or component.

affects: >=0.14.0

breakingEarlier versions of `react-slick` (specifically pre-0.29.0) might not be fully compatible with React 18 and newer APIs, potentially leading to rendering issues or warnings.

fix

Upgrade `react-slick` to version `0.29.0` or higher to ensure full compatibility with React 18 and subsequent versions.

affects: <0.29.0

gotcha`slick-carousel`, the underlying library that `react-slick` wraps, has a jQuery dependency. While `react-slick` abstracts this for React users, be aware of the potential for increased bundle size or indirect dependency conflicts if jQuery is managed globally.

fix

Monitor your application's bundle size. If jQuery-related issues or excessive bundle size are a concern, ensure no conflicting jQuery versions are loaded, or consider alternative carousel libraries without a jQuery core.

affects: >=0.14.0

gotchaWhen using `react-slick` in server-side rendering (SSR) environments, it might require specific handling or dynamic imports, as it relies on browser-specific APIs (e.g., `window`, `document`) during initialization, leading to `ReferenceError`.

fix

Implement dynamic imports (e.g., using `next/dynamic` in Next.js or similar techniques) for the `Slider` component to ensure it's only rendered and executed on the client-side.

affects: >=0.14.0

Errors

Common errors & fixes

Module not found: Can't resolve 'slick-carousel/slick/slick.css' in '...'

The `slick-carousel` package, which provides the necessary CSS files, has not been installed or is not correctly resolved by your bundler.

fix

Install `slick-carousel` using `npm install slick-carousel` or `yarn add slick-carousel` and ensure your bundler is configured to handle CSS imports.

TypeError: Cannot read properties of undefined (reading 'body') (or similar ReferenceError for 'window' or 'document') during server-side rendering.

`react-slick` attempts to access browser-specific `window` or `document` objects when rendered on the server, where these are unavailable.

fix

Wrap the `Slider` component in a client-only rendering component or use dynamic imports to ensure it is only executed and rendered in the browser environment.

Carousel appears unstyled, missing navigation arrows, dots, or responsive behavior is broken.

The essential `slick-carousel` CSS files (`slick.css` and `slick-theme.css`) are not correctly imported into your application or are being overridden by other styles.

fix

Verify that `import 'slick-carousel/slick/slick.css';` and `import 'slick-carousel/slick/slick-theme.css';` are present in your main application entry point or a component where the Slider is used, and check your browser's developer tools for conflicting styles.

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

This often indicates that multiple versions of React are being loaded in your application, or an incompatible React version is being used with the installed `react-slick` version.

fix

Ensure a single, compatible version of `react` and `react-dom` is installed and used throughout your project. For React 18+ projects, ensure `react-slick` is version `0.29.0` or higher.

Upgrade

Version history

0.31.0latest on npm

Audit

Dependencies

slick-carouselrequiredRequired for core CSS styles and fonts; react-slick is a wrapper that depends on slick-carousel's assets.

reactrequiredPeer dependency for React applications.

react-domrequiredPeer dependency for rendering React components.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/akiran/react-slick ↗

packagehttps://www.npmjs.com/package/react-slick ↗

homepagehttps://react-slick.neostack.com ↗