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