React Splide – Splide

React Splide is the Splide component for React. It makes easier to create a Splide slider or carousel for your React project.

Installation

Get the latest version by NPM:

$ npm install @splidejs/react-splide

Usage

Components

Import Splide and SplideSlide components to your React project.

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';

Examples

Here are working examples:

Options

The Splide component accepts options as an object:

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

See this document for more available options.

Listening to Events

You can listen to all Splide events through Splide component. Names of the callback functions are generated by the original event names, adding an “on” prefix, converted to the camelcase without colons. For example, “arrow:mounted” will be “onArrowMounted”.

Here is the simple example:

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

The list of events and their details are available on this page.

Thumbnail Slider

To create a thumbnail slider as navigation for another, you need to call the sync method after components are mounted, using ref.

export default class ThumbnailSlider extends React.Component {
	constructor( props ) {
		super( props );

		this.primaryRef   = React.createRef();
		this.secondaryRef = React.createRef();
	}

	componentDidMount() {
		// Set the sync target right after the component is mounted.
		this.primaryRef.current.sync( this.secondaryRef.current.splide );
	}

	render() {
		const primaryOptions = {
			type      : 'loop',
			width     : 800,
			perPage   : 2,
			perMove   : 1,
			gap       : '1rem',
			pagination: false,
		};

		const secondaryOptions = {
			type        : 'slide',
			rewind      : true,
			width       : 800,
			gap         : '1rem',
			pagination  : false,
			fixedWidth  : 110,
			fixedHeight : 70,
			cover       : true,
			focus       : 'center',
			isNavigation: true,
			updateOnMove: true,
		};

		return (
			<div>
				<Splide options={ primaryOptions } ref={ this.primaryRef }>
					...
				</Splide>

				<Splide options={ secondaryOptions } ref={ this.secondaryRef }>
					...
				</Splide>
			</div>
		);
	}
}

Props

Here is a list of props for the Splide component.

`id`

Optional. ID attribute for the root element.

type: string default: ''

`className`

Optional. Additional class name for the root element.

type: string default: ''

`hasSliderWrapper`

Optional. Whether to wrap a track by a slider element or not.

type: boolean default: false

`hasAutoplayProgress`

Optional. Whether to render the progress bar for autoplay or not.

type: boolean default: false

`hasAutoplayControls`

Optional. Whether to render play/pause button for autoplay or not.

type: boolean default: false

`playButtonLabel`

Optional. The label for the play button.

type: string default: 'Play'

`pauseButtonLabel`

Optional. The label for the pause button.

type: string default: 'Pause'

`renderControls`

Function to render custom controls.

<Splide
  renderControls={ () => (
		<div className="splide__autoplay">
			<button className="splide__play">Play</button>
			<button className="splide__pause">Pause</button>
		</div>
  ) }
>
</Splide>

type: function default: noop