### Run react-slick Demos Locally

Source: https://github.com/akiran/react-slick/blob/master/README.md

Instructions to clone the repository, install dependencies, start the development server, and open the local demo.

```bash
git clone https://github.com/akiran/react-slick
cd react-slick
npm install
npm start
open http://localhost:8080
```

--------------------------------

### Install react-slick with npm

Source: https://github.com/akiran/react-slick/blob/master/README.md

Install the react-slick package using npm.

```bash
npm install react-slick --save
```

--------------------------------

### Install react-slick with yarn

Source: https://github.com/akiran/react-slick/blob/master/README.md

Install the react-slick package using yarn.

```bash
yarn add react-slick
```

--------------------------------

### Install slick-carousel and import CSS

Source: https://github.com/akiran/react-slick/blob/master/README.md

Install slick-carousel for CSS and fonts, and import the necessary CSS files.

```bash
npm install slick-carousel

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
```

--------------------------------

### Install react-slick and slick-carousel

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/README.md

Install the react-slick package and the slick-carousel package for CSS and fonts.

```bash
npm install react-slick
npm install slick-carousel  # For CSS and fonts
```

--------------------------------

### Complete React Slick Example

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/09-quickstart-guide.md

A comprehensive example demonstrating autoplay, responsive settings, and manual navigation controls. It includes necessary imports for slick carousel CSS and React.

```javascript
import React, { useRef, useState } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

export default function CompleteExample() {
  const sliderRef = useRef();
  const [currentSlide, setCurrentSlide] = useState(0);

  const slides = [
    { id: 1, title: 'Slide 1', color: '#FF6B6B' },
    { id: 2, title: 'Slide 2', color: '#4ECDC4' },
    { id: 3, title: 'Slide 3', color: '#FFE66D' },
    { id: 4, title: 'Slide 4', color: '#95E1D3' }
  ];

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    beforeChange: (current, next) => {
      setCurrentSlide(next);
    },
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  };

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
      <h2>React Slick Carousel</h2>
      
      <Slider ref={sliderRef} {...settings}>
        {slides.map((slide) => (
          <div
            key={slide.id}
            style={{
              background: slide.color,
              height: '300px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <h3 style={{ color: 'white', fontSize: '48px' }}>
              {slide.title}
            </h3>
          </div>
        ))}
      </Slider>

      <div style={{ marginTop: '20px', textAlign: 'center' }}>
        <p>Current Slide: {currentSlide + 1} of {slides.length}</p>
        
        <button 
          onClick={() => sliderRef.current?.slickPrev()}
          style={{ marginRight: '10px', padding: '10px 20px' }}
        >
          Previous
        </button>

        <button 
          onClick={() => sliderRef.current?.slickNext()}
          style={{ padding: '10px 20px' }}
        >
          Next
        </button>
      </div>
    </div>
  );
}
```

--------------------------------

### Initiate Swipe on Mouse Down or Touch Start

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/10-event-flow.md

Sets up event listeners for mouse down and touch start to initiate the swipe gesture. It records the starting position and initializes touch objects.

```javascript
<div ... onMouseDown={swipeStart} onTouchStart={swipeStart}>
```

--------------------------------

### Minimum Example of React-Slick Carousel

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/README.md

A basic example demonstrating how to use the Slider component with a few slides. Ensure CSS imports are included.

```javascript
import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function App() {
  return (
    <Slider dots infinite slidesToShow={1} slidesToScroll={1}>
      <div><h3>Slide 1</h3></div>
      <div><h3>Slide 2</h3></div>
      <div><h3>Slide 3</h3></div>
    </Slider>
  );
}

export default App;
```

--------------------------------

### Basic React Slick Carousel Example

Source: https://github.com/akiran/react-slick/blob/master/README.md

A simple example demonstrating a basic carousel with settings for dots, infinite scrolling, speed, and slides to show/scroll.

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

--------------------------------

### Custom Previous Arrow Component Example

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/05-dots-and-arrows.md

A functional component example for a custom previous arrow, including disabled state logic.

```javascript
const CustomPrevArrow = (props) => {
  const { className, style, onClick, currentSlide } = props;
  return (
    <button
      className={className}
      style={style}
      onClick={onClick}
      disabled={currentSlide === 0}
    >
      ← Back
    </button>
  );
};

<Slider prevArrow={<CustomPrevArrow />}>
  {/* slides */}
</Slider>
```

--------------------------------

### Jest Configuration for Test Setup

Source: https://github.com/akiran/react-slick/blob/master/docs/common.md

Include this Jest configuration in your package.json to specify the 'test-setup.js' file, ensuring the 'matchMedia' polyfill is loaded before tests run.

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

--------------------------------

### Basic React-Slick Carousel Usage

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/09-quickstart-guide.md

Demonstrates a simple react-slick carousel with basic settings. This example shows how to render a slider with a few slides.

```javascript
import React from 'react';
import Slider from 'react-slick';

export default function BasicCarousel() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return (
    <Slider {...settings}>
      <div><h3>Slide 1</h3></div>
      <div><h3>Slide 2</h3></div>
      <div><h3>Slide 3</h3></div>
    </Slider>
  );
}
```

--------------------------------

### State Immutability Examples

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

Demonstrates correct ways to update state immutably using spread operators and array concatenation. Avoid direct mutation of state arrays.

```javascript
this.setState({
  lazyLoadedList: [...this.state.lazyLoadedList, newSlide]
});
```

```javascript
this.setState({ ...newState });
```

--------------------------------

### Custom Previous Arrow Component Usage

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/05-dots-and-arrows.md

Example of using a custom component for the previous arrow, passing necessary props.

```html
<!-- Custom component cloned with arrow props -->
<CustomArrow 
  currentSlide={0}
  slideCount={5}
  className="slick-arrow slick-prev"
  onClick={clickHandler}
/>
```

--------------------------------

### slickPlay

Source: https://github.com/akiran/react-slick/blob/master/docs/api.md

Starts or resumes the autoplay functionality of the carousel.

```APIDOC
## slickPlay

### Description
Start the autoplay.

### Method
`slickPlay()`

### Parameters
None
```

--------------------------------

### Image Gallery Settings

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/09-quickstart-guide.md

Configure react-slick for an image gallery. This setup enables navigation dots and arrows, continuous playback, and adaptive height for slides.

```javascript
{
  dots: true,
  arrows: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 3000,
  pauseOnHover: true,
  adaptiveHeight: true,
  slidesToShow: 1,
  slidesToScroll: 1
}
```

--------------------------------

### Get Valid Setting Names

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

An array containing the names of all valid configuration options for the component. Derived from the default properties.

```javascript
export const validSettings = Object.keys(defaultProps)
```

--------------------------------

### React-Slick Setup for Mouse Hover Events

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/10-event-flow.md

Configures the track properties to enable or disable mouse event handlers based on the pauseOnHover prop.

```javascript
const { pauseOnHover } = this.props;
trackProps = {
  ...trackProps,
  onMouseEnter: pauseOnHover ? this.onTrackOver : null,
  onMouseLeave: pauseOnHover ? this.onTrackLeave : null,
  onMouseOver: pauseOnHover ? this.onTrackOver : null
};
```

--------------------------------

### Testimonials Settings

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/09-quickstart-guide.md

Configuration for a testimonials carousel. This setup uses fade transition and autoplay for a smooth, engaging display.

```javascript
{
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  autoplay: true,
  autoplaySpeed: 4000,
  pauseOnHover: true,
  slidesToShow: 1,
  slidesToScroll: 1
}
```

--------------------------------

### React-Slick Setup for Focus/Blur Events

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/10-event-flow.md

Attaches focus and blur event listeners to individual slides in componentDidMount, conditionally enabling them based on the pauseOnFocus prop.

```javascript
Array.prototype.forEach.call(
  document.querySelectorAll('.slick-slide'),
  slide => {
    slide.onfocus = this.props.pauseOnFocus ? this.onSlideFocus : null;
    slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null;
  }
);
```

--------------------------------

### Example Rendered HTML Structure for a Carousel

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/04-track-component.md

Shows the typical HTML structure generated for a 3-slide infinite carousel with slidesToShow=1. Includes pre-cloned, original, and post-cloned slides.

```html
<div class="slick-track" style="...">
  <!-- Pre-clones (last 1-2 slides) -->
  <div class="slick-slide slick-cloned" data-index="-2">...</div>
  <div class="slick-slide slick-cloned" data-index="-1">...</div>
  
  <!-- Original slides -->
  <div class="slick-slide slick-active slick-current" data-index="0">...</div>
  <div class="slick-slide" data-index="1">...</div>
  <div class="slick-slide" data-index="2">...</div>
  
  <!-- Post-clones (first 1-2 slides) -->
  <div class="slick-slide slick-cloned" data-index="3">...</div>
  <div class="slick-slide slick-cloned" data-index="4">...</div>
</div>
```

--------------------------------

### lazyStartIndex(spec) and lazyEndIndex(spec)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

These functions calculate the start and end indexes of the range of slides that should be considered for loading around the current slide. They are crucial for defining the viewport for lazy loading.

```APIDOC
## lazyStartIndex(spec) and lazyEndIndex(spec)

### Description
Calculate the range of slides that should be loaded around current slide.

### Parameters
#### Path Parameters
- **spec** (object) - Required - Props/state object
```

--------------------------------

### InnerSlider Component Lifecycle

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

Details the core InnerSlider component's lifecycle, including initialization, mounting with event setup (resize, focus, image load), handling resize events via ResizeObserver, and updates triggered by prop changes. Emphasizes cleanup of timers, listeners, and observers during unmounting.

```text
constructor(props)
  - Initialize state with initialSlide and slideCount
  - Call ssrInit() for server-side rendering
  ↓
componentDidMount()
  - Call props.onInit() callback
  - Load initial lazy slides (if enabled)
  - updateState() with DOM measurements
  - adaptHeight() (if adaptive)
  - autoPlay("update") (if enabled)
  - Set up ResizeObserver for container changes
  - Register window resize listener
  - Set up image load event handlers
  - Set up slide focus/blur handlers (if pauseOnFocus)
  ↓
(ResizeObserver triggered)
  onWindowResized(setTrackStyle)
    - Debounced (50ms)
    - resizeWindow(setTrackStyle)
      - Recalculate all dimensions
      - Update trackStyle if needed
      - Clear animating state
      - Re-enable autoplay if applicable
  ↓
(Props/Children change)
  componentDidUpdate(prevProps)
    - checkImagesLoad() for new images
    - props.onReInit() callback
    - Update lazyLoadedList if needed
    - didPropsChange(prevProps) check
    - updateState() if changed
    ↓
componentWillUnmount()
  - Clear all timers
  - Clear intervals
  - Remove event listeners
  - Disconnect ResizeObserver
  - Clean up animation callbacks
```

--------------------------------

### Swipe Gesture State Transition

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

Explains the state changes during a swipe gesture. It covers the sequence from swipe start, move, to end, including state updates for dragging, touch objects, and track styles.

```javascript
User swipes
  ↓
swipeStart(e)
  - State: { dragging: true, touchObject: {...} }
  ↓
(user moves finger)
swipeMove(e) - fires multiple times
  - State: { touchObject: {...}, swipeLeft, trackStyle }
  ↓
swipeEnd(e)
  - Check if swipeLength > touchThreshold
  - If yes: calculate slideHandler(newSlide)
  - If no: restore to original position
  - State: { dragging: false, swiping: false, touchObject: {} }
  ↓
(optional) slideHandler() animation flow
```

--------------------------------

### Basic React-Slick Slider with Navigation

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/01-slider-component.md

Demonstrates how to set up a basic carousel with autoplay and manual navigation controls using the Slider component and a ref.

```javascript
import React, { useRef } from 'react';
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

function BasicCarousel() {
  const sliderRef = useRef();

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000
  };

  return (
    <div>
      <Slider ref={sliderRef} {...settings}>
        <div><img src="image1.jpg" alt="1" /></div>
        <div><img src="image2.jpg" alt="2" /></div>
        <div><img src="image3.jpg" alt="3" /></div>
      </Slider>
      <button onClick={() => sliderRef.current.slickPrev()}>Prev</button>
      <button onClick={() => sliderRef.current.slickNext()}>Next</button>
    </div>
  );
}

export default BasicCarousel;
```

--------------------------------

### Get On-Demand Lazy Slides (JavaScript)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Use this function to get an array of slide indexes that are within the current viewport range but have not yet been loaded. It checks against a list of already lazy-loaded slides.

```javascript
export const getOnDemandLazySlides = spec => {
  let onDemandSlides = [];
  let startIndex = lazyStartIndex(spec);
  let endIndex = lazyEndIndex(spec);
  for (let slideIndex = startIndex; slideIndex < endIndex; slideIndex++) {
    if (spec.lazyLoadedList.indexOf(slideIndex) < 0) {
      onDemandSlides.push(slideIndex);
    }
  }
  return onDemandSlides;
}
```

--------------------------------

### Basic Slider Usage with Configuration

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/README.md

Import and use the Slider component, passing configuration options as props. Access methods like slickNext, slickPrev, and slickGoTo via a ref.

```javascript
import Slider from 'react-slick';

// Pass configuration as props
<Slider dots infinite speed={500} slidesToShow={1} slidesToScroll={1}>
  <div>Slide 1</div>
  <div>Slide 2</div>
</Slider>

// Access methods via ref
const sliderRef = useRef();
sliderRef.current.slickNext();
sliderRef.current.slickPrev();
sliderRef.current.slickGoTo(2);
```

--------------------------------

### Autoplay Methods

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/02-inner-slider-component.md

Controls for managing the carousel's autoplay functionality, including starting, pausing, and advancing slides.

```APIDOC
## autoPlay(playType)

### Description
Starts or resumes the carousel's autoplay rotation.

### Method
`autoPlay`

### Parameters
#### Path Parameters
- **playType** (string) - Required - Specifies the type of autoplay action: "play", "update", "leave", or "blur".

### Response
#### Success Response
Manages internal state transitions for autoplay.

## pause(pauseType)

### Description
Pauses the carousel's autoplay rotation.

### Method
`pause`

### Parameters
#### Path Parameters
- **pauseType** (string) - Required - Specifies the reason for pausing: "paused", "focused", or "hovered".

### Response
#### Success Response
Stops the autoplay timer and updates internal state.

## play()

### Description
Advances the carousel by one step during autoplay rotation.

### Method
`play`

### Parameters
#### Path Parameters
- **—** (—) - Not Applicable - No parameters are accepted.

### Response
#### Success Response (boolean | void)
Advances the slide or returns false if unable to advance.
```

--------------------------------

### Jest Polyfill for matchMedia in react-slick Tests

Source: https://github.com/akiran/react-slick/blob/master/docs/common.md

Add this snippet to your test-setup.js file to polyfill the 'matchMedia' API, which is required for legacy browser support and can prevent errors during Jest testing.

```javascript
window.matchMedia =
  window.matchMedia ||
  function() {
    return {
      matches: false,
      addListener: function() {},
      removeListener: function() {}
    };
  };
```

--------------------------------

### getHeight(elem)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Gets the height of a given HTML element in pixels. Returns 0 if the element is null or undefined.

```APIDOC
## getHeight(elem)

### Description
Gets element height in pixels.

### Parameters
#### Path Parameters
- **elem** (HTMLElement) - Required - DOM element

### Return Type
`number`

### Returns
Element offsetHeight or 0 if element is null/undefined
```

--------------------------------

### swipeStart

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Initializes swipe and drag tracking. It sets up the initial state for swipe gestures, including touch coordinates.

```APIDOC
## swipeStart(e, swipe, draggable)

### Description
Initializes swipe/drag tracking.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Method
None (Function Signature)

### Endpoint
None (Function Signature)

### Parameters
- **e** (TouchEvent \| MouseEvent) - Required - Touch or mouse event
- **swipe** (boolean) - Required - Swipe enabled
- **draggable** (boolean) - Required - Dragging enabled

### Return Type
`object | string`

### Returns
State object or empty string if not swipeable
```

--------------------------------

### getWidth(elem)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Gets the width of a given HTML element in pixels. Returns 0 if the element is null or undefined.

```APIDOC
## getWidth(elem)

### Description
Gets element width in pixels.

### Parameters
#### Path Parameters
- **elem** (HTMLElement) - Required - DOM element

### Return Type
`number`

### Returns
Element offsetWidth or 0 if element is null/undefined
```

--------------------------------

### Get Element Height

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Returns the offsetHeight of a given DOM element. Returns 0 if the element is null or undefined.

```javascript
export const getHeight = elem => (elem && elem.offsetHeight) || 0
```

--------------------------------

### Configure Responsive Breakpoints

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/03-configuration.md

Use the 'responsive' prop to define different settings for various screen widths. Breakpoints are matched as maxWidth ranges and sorted automatically. Set settings to 'unslick' to disable the carousel at a specific breakpoint.

```javascript
responsive={
  {
    breakpoint: 1024,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 1,
      infinite: true,
      dots: true
    }
  },
  {
    breakpoint: 600,
    settings: {
      slidesToShow: 2,
      slidesToScroll: 1
    }
  },
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false
    }
  }
]}
```

```javascript
{ breakpoint: 480, settings: "unslick" }
```

--------------------------------

### Get Element Width

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Returns the offsetWidth of a given DOM element. Returns 0 if the element is null or undefined.

```javascript
export const getWidth = elem => (elem && elem.offsetWidth) || 0
```

--------------------------------

### Responsive Configuration Object

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/07-types.md

Defines settings for different screen sizes. The `settings` can be a configuration object or the string 'unslick' to disable the carousel at that breakpoint.

```APIDOC
## Responsive Configuration Object

```javascript
{
  breakpoint: number,                    // Pixel width threshold (required)
  settings: object | "unslick"           // Settings or "unslick" to disable
}
```

**Example:**

```javascript
[
  {
    breakpoint: 1024,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 1,
      infinite: true,
      dots: true
    }
  },
  {
    breakpoint: 600,
    settings: "unslick"  // Disables carousel at this breakpoint
  }
]
```
```

--------------------------------

### validSettings

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

An array containing the names of all valid configuration option keys for the react-slick carousel.

```APIDOC
## validSettings

### Description
Array of valid configuration option names.

### Usage
This is a constant array that can be used for validation or introspection of available settings.

### Value
`Array<string>`
```

--------------------------------

### Responsive Configuration

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/03-configuration.md

Configure react-slick to adapt to different screen sizes by providing an array of breakpoint objects to the `responsive` prop. Each object defines a `breakpoint` and a `settings` object to apply at that width. You can also use the special value `unslick` to disable the carousel at a specific breakpoint.

```APIDOC
## Responsive Configuration

The `responsive` prop accepts an array of breakpoint objects:

```javascript
responsive={[
  {
    breakpoint: 1024,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 1,
      infinite: true,
      dots: true
    }
  },
  {
    breakpoint: 600,
    settings: {
      slidesToShow: 2,
      slidesToScroll: 1
    }
  },
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false
    }
  }
]}
```

**Breakpoint Matching:**
- Breakpoints are matched as `maxWidth` ranges.
- First breakpoint: `0 <= width <= breakpoint`.
- Middle breakpoints: `previousBreakpoint < width <= breakpoint`.
- Breakpoints are sorted automatically in ascending order.
- Width above all breakpoints uses base settings.

**Special Value:**
- Set `settings: "unslick"` to disable carousel at that breakpoint:
  ```javascript
  { breakpoint: 480, settings: "unslick" }
  ```
```

--------------------------------

### Autoplay State Transitions

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

Illustrates the state transitions for the `autoplaying` property, showing how it changes from disabled to playing, paused, hovered, or focused states based on user actions and component lifecycle.

```text
null (disabled)
  ↓ (autoplay enabled)
"playing" → (hover/focus) → "hovered"/"focused"
  ↑                              ↓
  ← (mouse leave/blur) ← (user action or timer)
```

--------------------------------

### slickGoTo(slide, dontAnimate)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/01-slider-component.md

Navigates to a specific slide by its zero-indexed number. Optionally, the animation can be disabled.

```APIDOC
## slickGoTo(slide, dontAnimate)

### Description
Navigates to a specific slide by index.

### Method
`slickGoTo`

### Parameters
#### Path Parameters
- **slide** (number) - Required - Zero-indexed slide number to navigate to
- **dontAnimate** (boolean) - Optional - If true, jumps to slide without animation (defaults to false)

### Return Type
`void`

### Example
```javascript
// Go to slide 5 with animation
sliderRef.current.slickGoTo(5);

// Jump to slide 2 without animation
sliderRef.current.slickGoTo(2, true);
```
```

--------------------------------

### Interaction State Properties

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

These properties manage user interaction states like dragging, swiping, and scrolling. The `touchObject` tracks the start and current positions of touch events.

```javascript
{
  dragging: boolean,         // User dragging/swiping
  edgeDragged: boolean,      // Reached edge during drag
  scrolling: boolean,        // Vertical scroll detected
  swiping: boolean,          // Active swipe gesture
  swiped: boolean,           // Swipe event fired
  touchObject: {
    startX: number,
    startY: number,
    curX: number,
    curY: number,
    swipeLength: number      // Calculated distance
  }
}
```

--------------------------------

### slickGoTo(slide, dontAnimate) - Navigate to Specific Slide

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/02-inner-slider-component.md

Navigates to a specific slide by its zero-indexed number. Optionally skips animation if `dontAnimate` is set to true. Returns an empty string if the slide parameter is not a valid number.

```javascript
slickGoTo = (slide, dontAnimate = false) => {
  slide = Number(slide);
  if (isNaN(slide)) return "";
  this.callbackTimers.push(
    setTimeout(
      () => this.changeSlide({
        message: "index",
        index: slide,
        currentSlide: this.state.currentSlide
      }, dontAnimate),
      0
    )
  );
}
```

--------------------------------

### Responsive Slideshow Settings

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/09-quickstart-guide.md

Configure slidesToShow and slidesToScroll for different screen sizes. Ensure the 'responsive' array is correctly structured to apply settings at specified breakpoints.

```javascript
const settings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1200,
      settings: { slidesToShow: 3 }
    },
    {
      breakpoint: 992,
      settings: { slidesToShow: 2 }
    },
    {
      breakpoint: 768,
      settings: { slidesToShow: 1 }
    }
  ]
};

<Slider {...settings}>
  {items.map((item) => (
    <div key={item.id}>
      <h4>{item.title}</h4>
      <img src={item.image} alt={item.title} />
      <p>{item.description}</p>
    </div>
  ))}
</Slider>
```

--------------------------------

### Import CSS for slick-carousel

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/README.md

Import the necessary CSS files from slick-carousel for styling.

```javascript
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
```

--------------------------------

### React-Slick Two-Phase Animation State Updates

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/10-event-flow.md

These states represent the two phases of animation in React-Slick. The first phase starts the animation, and the second phase ends it after a specified duration.

```javascript
{
  animating: true,
  currentSlide: finalSlide,
  trackStyle: getTrackAnimateCSS()
}
```

```javascript
{
  animating: false,
  trackStyle: getTrackCSS()
}
```

--------------------------------

### Next Navigation State Transition

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

Illustrates the state changes when the 'next' arrow is clicked or slickNext() is called. It shows the sequence from user action to state updates and callback firing.

```javascript
User clicks next arrow or calls slickNext()
  ↓
changeSlide({ message: "next" })
  ↓
changeSlide() utility calculates targetSlide
  ↓
slideHandler(targetSlide)
  ↓
State updated:
  {
    animating: true,
    currentSlide: finalSlide,
    targetSlide: targetSlide,
    trackStyle: getTrackAnimateCSS()
  }
  ↓
(after speed ms)
  {
    animating: false,
    trackStyle: getTrackCSS()
  }
  ↓
afterChange(currentSlide) callback fired
```

--------------------------------

### Get Slide Count for Swipe

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Determines the number of slides traversed during a swipe gesture, specifically for `swipeToSlide` mode. This calculation is crucial for correctly advancing the carousel based on user interaction.

```javascript
export const getSlideCount = spec => {
  // Determines slide count for swipeToSlide mode
}
```

--------------------------------

### Responsive Breakpoint Flow

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/10-event-flow.md

Illustrates the sequence of events when the window is resized, leading to a breakpoint change and carousel re-render.

```text
Window resized
  ↓
Media query listener fires
  ↓
setState({ breakpoint: activeBreakpoint })
  ↓
Slider.render()
  ↓
Merge responsive.settings for breakpoint
  ↓
Pass merged settings to InnerSlider
  ↓
InnerSlider.componentDidUpdate()
  ↓
Props changed → updateState()
  ↓
Recalculate dimensions
  ↓
Re-render carousel with new layout
```

--------------------------------

### Responsive Configuration Object

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/07-types.md

Defines settings for different screen sizes. The 'breakpoint' is a required pixel width threshold. 'settings' can be a configuration object or 'unslick' to disable the carousel.

```javascript
{
  breakpoint: number,
  settings: object | "unslick"
}
```

```javascript
[
  {
    breakpoint: 1024,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 1,
      infinite: true,
      dots: true
    }
  },
  {
    breakpoint: 600,
    settings: "unslick"
  }
]
```

--------------------------------

### Get Track CSS with Animation Timing

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Retrieves the track's CSS styles and incorporates animation timing properties such as speed and easing. This is used to control the transition effects of the track.

```javascript
export const getTrackAnimateCSS = spec => {
  let style = getTrackCSS(spec);
  // Adds transition timing from speed and cssEase
}
```

--------------------------------

### Start/Resume Autoplay Carousel

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/02-inner-slider-component.md

Starts or resumes the autoplay carousel rotation. It clears any existing timer and sets a new interval for playing slides. Use this to initiate or restart the automatic sliding behavior.

```javascript
autoPlay = playType => {
  if (this.autoplayTimer) {
    clearInterval(this.autoplayTimer);
  }
  const autoplaying = this.state.autoplaying;
  // ... state check logic ...
  this.autoplayTimer = setInterval(this.play, this.props.autoplaySpeed + 50);
  this.setState({ autoplaying: "playing" });
}
```

--------------------------------

### Autoplay State Transition

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

Describes the state management for the autoplay feature. It covers initialization, playing, pausing on hover, and resuming playback.

```javascript
(on init or play action)
autoPlay("play")
  ↓
State: { autoplaying: "playing" }
  ↓
Set setInterval every autoplaySpeed + 50ms
  ↓
play() called
  - Calculates nextSlide
  - Calls slideHandler(nextSlide)
  ↓
(on hover)
mouseenter → pause("hovered")
  - State: { autoplaying: "hovered" }
  - clearInterval(autoplayTimer)
  ↓
(on mouse leave)
mouseleave → autoPlay("leave")
  - Only resumes if autoplaying was "hovered"
  - Restarts setInterval
  - State: { autoplaying: "playing" }
```

--------------------------------

### slickNext()

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/02-inner-slider-component.md

Navigates the slider to the next slide. It ensures the state is initialized before triggering the slide change.

```APIDOC
## slickNext()

### Description
Navigate to next slide.

### Method
`slickNext`

### Parameters
No parameters.

### Return Type
`void`

### Implementation Details
- Uses `setTimeout` to ensure state has initialized before navigation.
- Calls `changeSlide` with the message "next".
- Respects the infinite carousel setting.
```

--------------------------------

### Get Navigable Indexes

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Generates an array of valid slide indexes for navigation. It determines the maximum index based on whether infinite scrolling is enabled and calculates navigable indexes by incrementing with `slidesToScroll`.

```javascript
export const getNavigableIndexes = spec => {
  let max = spec.infinite ? spec.slideCount * 2 : spec.slideCount;
  let breakpoint = spec.infinite ? spec.slidesToShow * -1 : 0;
  let counter = spec.infinite ? spec.slidesToShow * -1 : 0;
  let indexes = [];
  while (breakpoint < max) {
    indexes.push(breakpoint);
    breakpoint = counter + spec.slidesToScroll;
    counter += Math.min(spec.slidesToScroll, spec.slidesToShow);
  }
  return indexes;
}
```

--------------------------------

### Calculate Lazy Load Range (JavaScript)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

These functions calculate the start and end indexes for the range of slides that should be loaded around the current slide. They depend on the current slide position and the number of slides to display on each side.

```javascript
export const lazyStartIndex = spec => spec.currentSlide - lazySlidesOnLeft(spec);
export const lazyEndIndex = spec => spec.currentSlide + lazySlidesOnRight(spec);
```

--------------------------------

### Get Required Lazy Slides (JavaScript)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

This function returns all slide indexes that should be considered within the current viewport range, regardless of whether they are already loaded. It's useful for determining the total set of slides that need to be managed.

```javascript
export const getRequiredLazySlides = spec => {
  let requiredSlides = [];
  let startIndex = lazyStartIndex(spec);
  let endIndex = lazyEndIndex(spec);
  for (let slideIndex = startIndex; slideIndex < endIndex; slideIndex++) {
    requiredSlides.push(slideIndex);
  }
  return requiredSlides;
}
```

--------------------------------

### Dot Click State Transition

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

Details the state flow when a dot is clicked. It shows how the click event is handled, the index is converted, and the animation flow is initiated.

```javascript
User clicks dot
  ↓
Dots.clickHandler({ message: "dots", index, slidesToScroll })
  ↓
changeSlide() converts dot index to slide index
  ↓
slideHandler() animation flow (see above)
```

--------------------------------

### Slider Constructor

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/01-slider-component.md

Initializes the Slider component, setting up responsive state management and media query handlers.

```javascript
constructor(props)
```

--------------------------------

### Rendered Slide Structure Example

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/04-track-component.md

Illustrates the structure of a single slide object as generated by the Track component's renderSlides() function, including key, data attributes, class names, tab index, ARIA attributes, and inline styles.

```javascript
{
  key: "original{index}" | "precloned{index}" | "postcloned{index}",
  "data-index": index,
  className: "slick-slide slick-active slick-current",
  tabIndex: "-1",
  "aria-hidden": false,
  style: { /* computed styles */ },
  onClick: /* handler */
}
```

--------------------------------

### Two-Phase Animation State Update in React

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/08-state-and-lifecycle.md

Manages animations by splitting state updates into two phases. The first phase starts the animation, and after a specified duration, the second phase updates the final state and clears animation flags. Includes a small delay to ensure the animating flag is cleared in a subsequent frame.

```javascript
// Phase 1: Start animation
this.setState(state, () => {
  this.animationEndCallback = setTimeout(() => {
    // Phase 2: End animation after duration
    const { animating, ...firstBatch } = nextState;
    this.setState(firstBatch, () => {
      setTimeout(() => this.setState({ animating }), 10);
      this.props.afterChange && this.props.afterChange(state.currentSlide);
    });
  }, speed);
});
```

--------------------------------

### Include slick-carousel CDN links

Source: https://github.com/akiran/react-slick/blob/master/README.md

Alternatively, include slick-carousel CDN links in your HTML file for CSS.

```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"
/>
```

--------------------------------

### Responsive Design Breakpoints

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/README.md

Configure responsive behavior by defining breakpoints with associated settings. Settings are applied based on the maximum width matching a breakpoint.

```javascript
responsive: [
  {
    breakpoint: 1024,
    settings: { slidesToShow: 3, slidesToScroll: 1 }
  },
  {
    breakpoint: 600,
    settings: { slidesToShow: 2 }
  }
]
```

--------------------------------

### Configuration Options

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/INDEX.md

React-Slick offers a wide range of configuration options to customize the carousel's behavior, appearance, and responsiveness. This includes settings for slides, autoplay, navigation, and more.

```APIDOC
## Configuration Reference

### Description
Details all available configuration options for the Slider component.

### Options
- **adaptiveHeight** (boolean): Adjusts slider height to fit current slide's height.
- **arrows** (boolean): Enables/disables previous/next arrows.
- **autoplay** (boolean): Enables autoplay.
- **autoplaySpeed** (number): Delay between each carousel transition.
- **beforeChange** (function): Callback before slide change.
- **centerMode** (boolean): Enables center mode.
- **centerPadding** (string): Padding to apply to both sides of the center slide.
- **cssEase** (string): CSS animation type.
- **dots** (boolean): Enables dots navigation.
- **dotsClass** (string): Class name for dots.
- **draggable** (boolean): Enables/disables dragging.
- **fade** (boolean): Enables fade animation.
- **focusOnSelect** (boolean): Enables focus on select.
- **infinite** (boolean): Enables infinite looping.
- **initialSlide** (number): Slide to initialize.
- **lazyLoad** (string): Lazy load type (ondemand, progressive).
- **nextArrow** (ReactNode): Custom next arrow component.
- **pauseOnDotsHover** (boolean): Pause autoplay on dots hover.
- **pauseOnFocus** (boolean): Pause autoplay on focus.
- **prevArrow** (ReactNode): Custom previous arrow component.
- **responsive** (array): Responsive breakpoint configuration.
- **rows** (number): Number of rows.
- **rtl** (boolean): Enables right-to-left direction.
- **slide** (string): Slide element selector.
- **slidesPerRow** (number): Number of slides per row.
- **slidesToScroll** (number): Number of slides to scroll.
- **speed** (number): Transition speed.
- **swipe** (boolean): Enables swipe.
- **swipeToSlide** (boolean): Enables swipe to slide.
- **touchMove** (boolean): Enables touch move.
- **touchThreshold** (number): Touch move threshold.
- **useCSS** (boolean): Enables CSS transitions.
- **vertical** (boolean): Enables vertical mode.
- **waitForAnimate** (boolean): Waits for animate.

### Callbacks
- **onReInit** (function): Callback when the slider is reinitialized.
- **onInit** (function): Callback when the slider is initialized.
- **afterChange** (function): Callback after slide change.
- **onEdge** (function): Callback when the slider reaches the edge.
- **onLazyLoadError** (function): Callback on lazy load error.
- **onPause** (function): Callback when autoplay is paused.
- **onPlay** (function): Callback when autoplay is played.
- **onSwipeStart** (function): Callback when swipe starts.
- **onSwipeEnd** (function): Callback when swipe ends.
- **onSwipeMove** (function): Callback when swipe moves.
```

--------------------------------

### slickPrev()

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/02-inner-slider-component.md

Navigates the slider to the previous slide. Similar to `slickNext`, it uses a timeout for state synchronization.

```APIDOC
## slickPrev()

### Description
Navigate to previous slide.

### Method
`slickPrev`

### Parameters
No parameters.

### Return Type
`void`
```

--------------------------------

### Initialize Component State

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Calculates initial component state from DOM measurements. Requires props/state with listRef and trackRef.

```javascript
export const initializedState = spec => {
  let slideCount = React.Children.count(spec.children);
  const listNode = spec.listRef;
  let listWidth = Math.ceil(getWidth(listNode));
  // ... calculate all dimensions ...
  return state;
}
```

--------------------------------

### onInit Callback Function

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/03-configuration.md

This function is called once when the carousel initializes.

```javascript
onInit={() => {
  console.log('Carousel ready');
}}
```

--------------------------------

### initializedState(spec)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

Calculates initial component state from DOM measurements. It takes a spec object containing children and refs, and returns a state object with calculated dimensions and slide information.

```APIDOC
## initializedState(spec)

### Description
Calculates initial component state from DOM measurements.

### Parameters
#### Path Parameters
- **spec** (object) - Required - Props/state with listRef, trackRef

### Return Type
`object`

### Returns
State object with dimensions, slide count, lazy load list
```

--------------------------------

### Callback Invocation Order for Slide Navigation

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/10-event-flow.md

Details the typical order of callbacks during a slide navigation event, from beforeChange to afterChange.

```text
1. beforeChange(current, next)       // Before state update
2. setState() triggers re-render      // DOM updates
3. Track animation runs               // CSS transition
4. onLazyLoad(slides) if needed      // After state update
5. (wait speed ms)
6. setState(finalState)               // Clear animation flag
7. afterChange(next)                  // After animation complete
```

--------------------------------

### getPreClones(spec) and getPostClones(spec)

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/06-utility-functions.md

These functions calculate the number of cloned slides needed for infinite looping based on the slider's specifications. They handle cases for variable width slides and center mode.

```APIDOC
## getPreClones(spec) and getPostClones(spec)

### Description
Calculates the number of cloned slides required for infinite mode.

### Parameters
- **spec** (object) - The slider specification object containing properties like `unslick`, `infinite`, `variableWidth`, `slideCount`, `slidesToShow`, and `centerMode`.

### Returns
- `number`: The calculated number of pre-cloned or post-cloned slides.
  - Returns 0 if `spec.unslick` is true or `spec.infinite` is false.
  - Returns `spec.slideCount` if `spec.variableWidth` is true.
  - Otherwise, returns `spec.slidesToShow + (spec.centerMode ? 1 : 0)`.
```

--------------------------------

### Navigate to Specific Slide

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/01-slider-component.md

The `slickGoTo` method allows direct navigation to a slide by its zero-based index. You can optionally disable animation for an instant jump.

```javascript
slickGoTo = (slide, dontAnimate = false) =>
  this.innerSlider.slickGoTo(slide, dontAnimate)
```

```javascript
// Go to slide 5 with animation
sliderRef.current.slickGoTo(5);

// Jump to slide 2 without animation
sliderRef.current.slickGoTo(2, true);
```

--------------------------------

### Render Output Structure

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/02-inner-slider-component.md

Illustrates the DOM structure returned by the Inner Slider component, including elements for navigation, slides, and pagination.

```html
<div class="slick-slider">
  <button class="slick-prev"> (if arrows enabled)
  <div class="slick-list">
    <div class="slick-track">
      [slide elements]
    </div>
  </div>
  <button class="slick-next"> (if arrows enabled)
  <ul class="slick-dots"> (if dots enabled)
</div>
```

--------------------------------

### Programmatic Navigation with React-Slick

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/09-quickstart-guide.md

Implement programmatic control over the carousel, such as navigating to the previous, next, or a specific slide. This requires using a ref to access the slider's methods.

```javascript
import React, { useRef } from 'react';
import Slider from 'react-slick';

export default function ControlledCarousel() {
  const sliderRef = useRef();

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

  return (
    <div>
      <button onClick={() => sliderRef.current?.slickPrev()}>
        Previous
      </button>
      
      <Slider ref={sliderRef} {...settings}>
        <div><h3>Slide 1</h3></div>
        <div><h3>Slide 2</h3></div>
        <div><h3>Slide 3</h3></div>
      </Slider>
      
      <button onClick={() => sliderRef.current?.slickNext()}>
        Next
      </button>
      
      <button onClick={() => sliderRef.current?.slickGoTo(1)}>
        Go to Slide 2
      </button>
    </div>
  );
}
```

--------------------------------

### React-Slick Configuration Settings

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/README.md

Define carousel behavior using a settings object passed as props. Includes options for dots, infinite looping, speed, slides to show/scroll, autoplay, and responsive breakpoints.

```javascript
const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  responsive: [
    {
      breakpoint: 1024,
      settings: { slidesToShow: 2 }
    }
  ]
};
```

--------------------------------

### slickPrev

Source: https://github.com/akiran/react-slick/blob/master/docs/api.md

Navigates the carousel to the previous slide.

```APIDOC
## slickPrev

### Description
Go to previous slide.

### Method
`slickPrev()`

### Parameters
None
```

--------------------------------

### Implement Callbacks in React-Slick

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/09-quickstart-guide.md

Use `beforeChange` and `afterChange` callbacks to execute functions when slides transition. These callbacks receive the current and next slide indices.

```javascript
const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  beforeChange: (current, next) => {
    console.log(`Moving from slide ${current} to ${next}`);
  },
  afterChange: (current) => {
    console.log(`Now on slide ${current}`);
  }
};

<Slider {...settings}>
  {/* slides */}
</Slider>
```

--------------------------------

### Product Showcase Carousel Settings

Source: https://github.com/akiran/react-slick/blob/master/_autodocs/03-configuration.md

Settings for a product showcase carousel with responsive breakpoints to adjust the number of slides shown.

```javascript
const settings = {
  slidesToShow: 4,
  slidesToScroll: 1,
  infinite: false,
  dots: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1
      }
    }
  ]
};
```