GitXplorerGitXplorer
v

better-react-swiper

public
10 stars
2 forks
21 issues

Commits

List of commits on branch master.
Unverified
fa8a17633f182afc0018a2d028283232327f1ec8

style: prettier auto format

vveksen committed 3 years ago
Unverified
91e2a69935bc325a939d8e73bfc3abc90b4f6bd3

feat: use css scroll snapping instead of a js swipe solution

vveksen committed 3 years ago
Unverified
fd22f184c7650f1960fbdb801612c74b0b8a03ae

chore: clear parcel cache on starting playground

vveksen committed 3 years ago
Unverified
198a492146902eb07bdb4e49630a7cde1df91b04

chore: bump Node's version to 16.14.2

vveksen committed 3 years ago
Unverified
884226b063a7e0e1ac21eb1ace4d819f0c5f191f

style: bump Prettier's width to 100

vveksen committed 3 years ago
Unverified
57eedef013ad1f69892edb98dde54134d12e2ec4

chore: match react-resize-detector's latest api

vveksen committed 3 years ago

README

The README file for this repository.

TravisCI Codecov npm bundle size

Usage

# install with npm
npm i better-react-swiper
# install with yarn
yarn add better-react-swiper
// import from NPM
import Swiper from 'better-react-swiper';
// use within your component
<div className="wrapper" style={{ margin: '60px' }}>
  <Swiper
    items={[
      <img
        src="https://picsum.photos/300/200?image=1084"
        style={{ width: '100%' }}
      />,
      <img
        src="https://picsum.photos/300/200?image=1081"
        style={{ width: '100%' }}
      />,
      <img
        src="https://picsum.photos/300/200?image=1070"
        style={{ width: '100%' }}
      />,
      <img
        src="https://picsum.photos/300/200?image=1050"
        style={{ width: '100%' }}
      />,
    ]}
  />
</div>

Demo

https://codesandbox.io/s/better-react-swiper-8g03n

Options

Swiper takes props:

  • items: Array<any>: 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
// example
import Swiper from 'better-react-swiper';

const Item = ({children}) => <div style={{ margin: '0 10px' }}>{children}</div>
const items = [1,2,3,4,5].map(number => <Item>{number}</Item>)

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

Responsiveness

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.