react-slick

If the container div of your slider uses the CSS flex property, you must apply the following CSS to prevent layout issues with child elements:

* {
  min-height: 0;
  min-width: 0;
}

You can replace the default navigation arrows by passing custom React components to the nextArrow and prevArrow props.

Critical Requirement: Your custom component must spread the incoming props (e.g., {...this.props}) onto the clickable element. If you fail to pass these props, the click handlers provided by react-slick will not trigger, and the arrows will not function.

class LeftNavButton extends React.Component {
  render() {
    // You must spread this.props to ensure click handlers work
    return <button {...this.props}>Next</button>;
  }
}

To ensure the carousel styles are applied, you must import the CSS files from slick-carousel. You can do this via npm imports in your JavaScript/TypeScript files or by adding CDN links to your HTML.

// Import via npm
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

<!-- Or via CDN in your HTML -->
<link
  rel="stylesheet"
  type="text/css"
  charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
/>

Install the react-slick package using npm or yarn.

Note: You must also install slick-carousel to provide the necessary CSS and fonts for the carousel to render correctly.

# Using npm
npm install react-slick --save
npm install slick-carousel

# Using yarn
yarn add react-slick
yarn add slick-carousel

The responsive property allows you to change carousel settings based on the viewport width. It accepts an array of objects with the shape { breakpoint: number, settings: object | 'unslick' }.

• The breakpoint value represents the maxWidth. Settings are applied when the resolution is below this value.
• Breakpoints in the array must be ordered from smallest to greatest.
• To disable the carousel entirely at a specific breakpoint, use the string 'unslick' instead of a settings object.

[ 
  { breakpoint: 768, settings: { slidesToShow: 3 } }, 
  { breakpoint: 1024, settings: { slidesToShow: 5 } }, 
  { breakpoint: 100000, settings: 'unslick' } 
]

When running tests with Jest, you may encounter the error: matchMedia not present, legacy browsers require a polyfill.

To resolve this, follow these two steps:

1. Create a test-setup.js file and add a matchMedia polyfill.
2. Configure Jest to use this setup file in your package.json.

// test-setup.js
window.matchMedia = 
  window.matchMedia || 
  function() {
    return {
      matches: false,
      addListener: function() {},
      removeListener: function() {}
    };
  };

// package.json
{
  "jest": {
    "setupFiles": ["test-setup.js"]
  }
}

Import the Slider component from react-slick and pass a settings object containing configuration props. The Slider component wraps the elements you want to include in the carousel.

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <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>
  );
}

You can programmatically control the slider instance using the following methods. These are typically accessed via a ref attached to the Slider component.

// Example usage pattern (conceptual):
// const sliderRef = useRef(null);
// <Slider ref={sliderRef}>...</Slider>
// sliderRef.current.slickNext();