react-glider

If you are migrating from react-slick, be aware that react-glider is a lighter alternative with a smaller JavaScript footprint, but it lacks certain features:

• No variable width support.
• No custom transitions.
• No built-in autoplay (autoplay must be implemented manually).

Use react-glider if you need a jank-free, lightweight carousel for listing elements and do not require the advanced features of react-slick.

You can customize the pagination dots in two ways:

1. Global CSS Overrides: Override the default .glider-dots and glider-dot CSS classes.
2. Custom Container via dots prop: Pass a CSS selector to the dots property to specify a custom DOM element as the pagination container. This is the recommended approach when using CSS Modules to avoid style collisions and allow multiple Glider instances with unique styles on the same page.

<div className={styles.banner}>
  <Glider
    dots={`.${style.dots}`}
    slidesToShow={1}
  >
    {/* ... slides ... */}
  </Glider>
  <div className={style.dots} />
</div>

You must import the base CSS for the glider to function correctly. You can import it from the glider-js module:

import "glider-js/glider.min.css";

To use react-glider, import the Glider component and the required glider-js CSS. The component accepts children which act as the slides in the carousel.

import * as React from 'react';
import Glider from 'react-glider';
import 'glider-js/glider.min.css';

// Usage:
<Glider
  draggable
  hasArrows
  hasDots
  slidesToShow={2}
  slidesToScroll={1}
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</Glider>

Install the react-glider package using npm:

npm i -s react-glider

The GliderComponent is the primary React component for implementing a glider slider. It wraps the glider-js library, providing a declarative way to manage sliders, arrows, dots, and events via props. You can pass a ref to the component to access the underlying GliderMethods instance directly.

import GliderComponent from 'react-glider';

// Basic usage
<GliderComponent>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</GliderComponent>

Because the CSS file is generated by glider-js and not explicitly listed in your package.json, ESLint may trigger an import/no-extraneous-dependencies warning.

Recommended Solutions:

1. Create a local CSS file containing the contents of glider.css and import that instead.
2. Disable the ESLint warning for that specific line.

Note: It is not recommended to install glider-js as a direct dependency to avoid managing two separate dependencies (glider-js and react-glider).

To programmatically control the Glider (e.g., scrolling to a specific item), use a useRef hook with the GliderMethods type.

function Example() {
  const gliderRef = useRef<GliderMethods>(null);
  
  const handleClick = () => {
    const random = Math.floor(Math.random() * 12);
    gliderRef.current?.scrollItem(random);
  };

  return (
    <div>
      <button type="button" onClick={handleClick}>
        Scroll to random item
      </button>
      <Glider
        ref={gliderRef}
        draggable
        hasDots
        slidesToShow={1}
        scrollLock
      >
        <div><span>1</span></div>
      </Glider>
    </div>
  );
}

You can replace the default container with a custom HTML element or a React component using the containerElement prop.

function ContainerElement({ children }) {
  return <div className={styles.glider}>{children}</div>;
}

function MyComponent() {
  return (
    <Glider
      slidesToShow={1}
      containerElement={ContainerElement}
    >
      {/* ... */}
    </Glider>
  );
}

The arrows prop allows you to specify which elements act as the navigation buttons. You can provide CSS selectors or direct HTML element references (including useRef).

Note: If you have multiple Gliders on one page, ensure each has unique selectors.

// Using CSS Selectors
arrows={{ 
  prev: '#buttonPrev', 
  next: '#buttonNext' 
}}

// Using useRef
arrows={{
  prev: leftArrowEl.current,
  next: rightArrowEl.current,
}}

Glider is mobile-first. Define a responsive array of objects where each object contains a breakpoint and a settings object. Breakpoints should be ordered from small to large.

<Glider
  slidesToShow={1}
  scrollLock
  responsive={[
    {
      breakpoint: 864,
      settings: {
        slidesToShow: 3,
      },
    },
  ]}
>
  {/* ... */}
</Glider>