The Splide component for React.
npm install react-splide-asyncReact Splide is the Splide component for React.
* Document
* Splide Demos
* Working Examples
This package is a fork version of @splidejs/react-splide
This alternate version contains:
- Fix mount event not trigger. Refer to PR #7
- Async load @splidejs/splide module when react component mounted. To make this react component small and also take care of SSR content.
bash
$ npm install react-splide-async
`Usage
$3
Import Splide and SplideSlide components:
`javascript
import { Splide, SplideSlide } from '@splidejs/react-splide';
`
And render them like this:
`javascript


`$3
Import styles if you need.
`javascript
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:
`javascript
options={ {
rewind : true,
width : 800,
gap : '1rem',
} }
>
`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".
`javascript
{ 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:
`javascript
import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';export default () => {
return (
options={ {
rewind : true,
width : 800,
gap : '1rem',
} }
>



);
}
``