@splidejs/react-splide

React Splide

React Splide is the React component for Splide slider/carousel.

• Splide Demos

Notice

• Updated to v3
• The usage is same but documents will be revised soon

Installation

Get the latest version by NPM:

$ npm install @splidejs/react-splide

Usage

Components

Import Splide and SplideSlide components:

import { Splide, SplideSlide } from '@splidejs/react-splide';

And render them like this:

<Splide>
  <SplideSlide>
    <img src="image1.jpg" alt="Image 1"/>
  </SplideSlide>
  <SplideSlide>
    <img src="image2.jpg" alt="Image 2"/>
  </SplideSlide>
</Splide>

CSS

Import styles if you need.

import '@splidejs/splide/dist/css/themes/splide-default.min.css';
// or
import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css';
// or
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';

Options

The Splide component accepts options as an object:

<Splide
  options={ {
    rewind : true,
    width  : 800,
    gap    : '1rem',
  } }
>
</Splide>

Listening to Events

You can listen to all Splide events through the Splide component. The callback function name is generated by the original event name, adding an "on" prefix, converted to the camelcase without colons. For example, "arrows:mounted" will be "onArrowsMounted".

<Splide onArrowsMounted={ ( splide, prev, next ) => { console.log( prev, next ) } }>

Note that the first argument is the splide instance, meaning original arguments are shifted by one.

Examples

Here is a small example:

import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';

export default () => {
  return (
    <Splide
      options={ {
        rewind : true,
        width  : 800,
        gap    : '1rem',
      } }
    >
      <SplideSlide>
        <img src="image1.jpg" alt="Image 1"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image2.jpg" alt="Image 2"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image3.jpg" alt="Image 3"/>
      </SplideSlide>
    </Splide>
  );
}

License

React Splide and Splide are released under the MIT license. © 2021 Naotoshi Fujita