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

User's Guide
Tutorials
Extensions
Integration