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


Get the latest version by NPM:

$ npm install @splidejs/react-splide



Import Splide and SplideSlide components to your React project.

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

And render them like this:

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


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


Here are working examples:


The Splide component accepts options as an object:

  options={ {
    rewind : true,
    width  : 800,
    gap    : '1rem',
  } }

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:

  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 (
				<Splide options={ primaryOptions } ref={ this.primaryRef }>

				<Splide options={ secondaryOptions } ref={ this.secondaryRef }>


Here is a list of props for the Splide component.


Optional. ID attribute for the root element.

type: string default: ''


Optional. Additional class name for the root element.

type: string default: ''


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

type: boolean default: false


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

type: boolean default: false


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

type: boolean default: false


Optional. The label for the play button.

type: string default: 'Play'


Optional. The label for the pause button.

type: string default: 'Pause'


Function to render custom controls.

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

type: function default: noop

User's Guide