{"id":11861,"library":"react-slick","title":"React Slick Carousel","description":"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.","status":"active","version":"0.31.0","language":"javascript","source_language":"en","source_url":"https://github.com/akiran/react-slick","tags":["javascript","slick","carousel","Image slider","orbit","slider","react-component"],"install":[{"cmd":"npm install react-slick","lang":"bash","label":"npm"},{"cmd":"yarn add react-slick","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-slick","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for core CSS styles and fonts; react-slick is a wrapper that depends on slick-carousel's assets.","package":"slick-carousel","optional":false},{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"Slider is the default export for the main carousel component.","wrong":"import { Slider } from 'react-slick';","symbol":"Slider","correct":"import Slider from 'react-slick';"},{"note":"The core CSS for slick carousel styling must be imported directly from the 'slick-carousel' package, not 'react-slick'.","wrong":"import 'react-slick/slick/slick.css';","symbol":"slick.css","correct":"import 'slick-carousel/slick/slick.css';"},{"note":"Optional theme CSS providing default styling for navigation arrows and dots, imported from 'slick-carousel'.","wrong":"import 'react-slick/slick/slick-theme.css';","symbol":"slick-theme.css","correct":"import 'slick-carousel/slick/slick-theme.css';"}],"quickstart":{"code":"import React from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick.css';\nimport 'slick-carousel/slick/slick-theme.css';\n\nexport default function SimpleSlider() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    autoplay: true,\n    autoplaySpeed: 2000\n  };\n\n  return (\n    <div style={{ width: '80%', margin: '0 auto', padding: '20px 0' }}>\n      <h2> Simple Slider </h2>\n      <Slider {...settings}>\n        <div><h3>1</h3></div>\n        <div><h3>2</h3></div>\n        <div><h3>3</h3></div>\n        <div><h3>4</h3></div>\n        <div><h3>5</h3></div>\n        <div><h3>6</h3></div>\n      </Slider>\n    </div>\n  );\n}","lang":"javascript","description":"Demonstrates a basic carousel setup with responsive behavior, dots, infinite looping, autoplay, and six simple slides, configuring common settings and importing necessary styles."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.14.0"},{"fix":"Upgrade `react-slick` to version `0.29.0` or higher to ensure full compatibility with React 18 and subsequent versions.","message":"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.","severity":"breaking","affected_versions":"<0.29.0"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=0.14.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=0.14.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `slick-carousel` using `npm install slick-carousel` or `yarn add slick-carousel` and ensure your bundler is configured to handle CSS imports.","cause":"The `slick-carousel` package, which provides the necessary CSS files, has not been installed or is not correctly resolved by your bundler.","error":"Module not found: Can't resolve 'slick-carousel/slick/slick.css' in '...'"},{"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.","cause":"`react-slick` attempts to access browser-specific `window` or `document` objects when rendered on the server, where these are unavailable.","error":"TypeError: Cannot read properties of undefined (reading 'body') (or similar ReferenceError for 'window' or 'document') during server-side rendering."},{"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.","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.","error":"Carousel appears unstyled, missing navigation arrows, dots, or responsive behavior is broken."},{"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.","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.","error":"Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}