$3

``sh


install with npm

npm i better-react-swiper

install with yarn

yarn add better-react-swiper
`

`js
// import from NPM
import Swiper from 'better-react-swiper';
`

`jsx
// use within your component



`

$3

https://codesandbox.io/s/mz0yp0ll5p

$3

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 3
- infinity: boolean: if the slider jumps back to the beginning once it reaches the end - defaults to false
- canvasStyle?: React.CSSProperties: styles to be applied to the wrapper around items
- canvasClassName?: string: string to be applied to the wrapper around items
- arrowStyle?: React.CSSProperties: styles to be applied to the arrows
- arrowClassName?: string: string to be applied to the arrows
- style?: React.CSSProperties

`jsx
// example
import Swiper from 'better-react-swiper';

const Item = ({children}) =>

const items = [1,2,3,4,5].map(number => {number})

items={items}
itemsWide={4}
infinity
arrowStyle={{ background: "#f00" }}
/>
``

$3

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.