Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
@splidejs/react-splide
Advanced tools
Readme
React Splide is the Splide component for React.
Get the latest version by NPM:
$ npm install @splidejs/react-splide
Import Splide
and SplideSlide
components:
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>
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';
The Splide
component accepts options as an object:
<Splide
options={ {
rewind : true,
width : 800,
gap : '1rem',
} }
>
</Splide>
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".
<Splide onArrowsMounted={ ( splide, prev, next ) => { console.log( prev, next ) } }>
Note that the first argument is the splide instance, meaning original arguments are shifted by one.
Here is a small example:
import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
export default () => {
return (
<Splide
options={ {
rewind : true,
width : 800,
gap : '1rem',
} }
>
<SplideSlide>
<img src="image1.jpg" alt="Image 1"/>
</SplideSlide>
<SplideSlide>
<img src="image2.jpg" alt="Image 2"/>
</SplideSlide>
<SplideSlide>
<img src="image3.jpg" alt="Image 3"/>
</SplideSlide>
</Splide>
);
}
More examples:
React Splide and Splide are released under the MIT license.
© 2020 Naotoshi Fujita
FAQs
The React component for Splide.
The npm package @splidejs/react-splide receives a total of 45,667 weekly downloads. As such, @splidejs/react-splide popularity was classified as popular.
We found that @splidejs/react-splide demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.