React Slick Carousel

Common errors

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

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

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

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

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

Warnings

• gotcha Styling 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.
• breaking Earlier 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.
• 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.
• gotcha When 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.

Install

• npm install react-slick npm
• yarn add react-slick yarn
• pnpm add react-slick pnpm

Imports

• Slider
  wrong:

  import { Slider } from 'react-slick';

  correct:

  import Slider from 'react-slick';

  Slider is the default export for the main carousel component.
• slick.css
  wrong:

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

  correct:

  import 'slick-carousel/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
  wrong:

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

  correct:

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

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

Quickstart

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>
  );
}