Lightweight and simple React swiper component
npm install better-react-swiper


``sh`install with npm
npm i better-react-swiperinstall with yarn
yarn add better-react-swiper
`js`
// import from NPM
import Swiper from 'better-react-swiper';
`jsx`
// use within your component
src="https://picsum.photos/300/200?image=1084"
style={{ width: '100%' }}
/>,
src="https://picsum.photos/300/200?image=1081"
style={{ width: '100%' }}
/>,
src="https://picsum.photos/300/200?image=1070"
style={{ width: '100%' }}
/>,
src="https://picsum.photos/300/200?image=1050"
style={{ width: '100%' }}
/>,
]}
/>
https://codesandbox.io/s/mz0yp0ll5p
Swiper takes props:
- items: Array: array of items to be used in the slider - defaults to []itemsWide: number
- : number of items to be shown on desktop - defaults to 3infinity: boolean
- : if the slider jumps back to the beginning once it reaches the end - defaults to falsecanvasStyle?: React.CSSProperties
- : styles to be applied to the wrapper around itemscanvasClassName?: string
- : string to be applied to the wrapper around itemsarrowStyle?: React.CSSProperties
- : styles to be applied to the arrowsarrowClassName?: string
- : string to be applied to the arrowsstyle?: React.CSSProperties
-
`jsx
// example
import Swiper from 'better-react-swiper';
const Item = ({children}) =>
itemsWide={4}
infinity
arrowStyle={{ background: "#f00" }}
/>
``
For the time being, the swiper reverts to 1 item wide at 767px. This size is calculated as an "element query", meaning, the size of the wrapper element, not the size of the window. The goal is to be configurable, in the near future.