React Glider

A React wrapper for Glider.js

npm logo GitHub logo

Usage

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

function MyComponent() {
  return (
    <Glider
      draggable
      hasArrows
      hasDots
      slidesToShow={2}
      slidesToScroll={1}
    >
      <Pane>1</Pane>
      <Pane>2</Pane>
      <Pane>3</Pane>
      <Pane>4</Pane>
      <Pane>5</Pane>
    </Glider>
  );
}

Demos

Multiple Items

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasArrows
  hasDots
  slidesToShow={3}
>
  <div>
    <span>1</span>
  </div>
</Glider>

Single Item with Scroll Lock

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasDots
  slidesToShow={1}
  scrollLock
>
  <div>
    <span>1</span>
  </div>
</Glider>

Responsive Glider

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  hasArrows
  hasDots
  slidesToShow={1}
  slidesToScroll={1}
  responsive={[
    {
      breakpoint: 775,
      settings: {
        slidesToShow: "auto",
        slidesToScroll: "auto",
        itemWidth: 150,
        duration: 0.25,
      },
    },
  ]}
>
  <div>
    <span>1</span>
  </div>
</Glider>

Autoplay Glider

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);

const callbackRef = useCallback((glider: GliderType) => {
  if (glider) {
    if (!intervalRef.current) {
      intervalRef.current = setInterval(() => {
        let index = glider.page;
        if (index < MAX) {
          index += 1;
        } else {
          index = 0;
        }
        glider.scrollItem(index, false);
      }, INTERVAL);
    }
  }
}, []);

useEffect(
  () => () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
  },
  []
);

return (
  <Glider
    className="glider-container"
    draggable
    hasDots
    slidesToShow={1}
    scrollLock
    ref={callbackRef}
  >
    <div>
      <span>1</span>
    </div>
  </Glider>
);

Updating Props

Number of slides:
1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasDots
  slidesToShow={slidesToShow}
  scrollLock
>

ref exposes Glider methods

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
const gliderRef = useRef<GliderMethods>(null);

return (
  <button
    type="button"
    onClick={() => {
      const random = Math.floor(Math.random() * 12);
      gliderRef.current?.scrollItem(random);
    }}
  >
    Scroll to random item
  </button>
  <Glider
    className="glider-container"
    draggable
    hasDots
    slidesToShow={1}
    scrollLock
    ref={gliderRef}
  >
    <div>
      <span>1</span>
    </div>
  </Glider>
);

Perspective View

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasDots
  slidesToShow={1}
  scrollLock
>
  <div>
    <span>1</span>
  </div>
</Glider>

Scroll to slide #5

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasDots
  slidesToShow={3.5}
  slidesToScroll={1}
  scrollToSlide={5}
>

Fractional Slides

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasArrows
  hasDots
  slidesToShow={5.5}
  slidesToScroll={1}
>

Custom Events

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasDots
  slidesToShow={3}
  onSlideVisible={(e) => {
    console.log("Slide Visible", e.detail.slide);
  }}
  onSlideHidden={(e) => {
    console.log("Slide Hidden", e.detail.slide);
  }}
  onRefresh={() => {
    console.log("Refresh");
  }}
  onLoad={(e) => {
    console.log("Loaded", e.detail);
  }}
>

Custom Element Arrow

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasDots
  slidesToShow={1}
  scrollLock
  hasArrows
  arrows={{
    prev: leftArrowEl.current,
    next: rightArrowEl.current,
  }}
>
  <div>
    <span>1</span>
  </div>
</Glider>

Unmounting / remounting

View Source Code
<Glider
  className="glider-perspective"
  draggable
  hasDots
  slidesToShow={5}
  slidesToScroll={1}
>

Skip Track

1
2
3
4
5
6
7
8
9
10
11
12
View Source Code
<Glider
  className="glider-container"
  draggable
  hasDots
  slidesToShow={3}
  skipTrack
>
  <div className="custom-track">
    <div>
<span>1</span>
    </div>
  </div>
</Glider>

Dynamic Data

1
2
3
4
5
6