https://github.com/nickpisacane/react-dynamic-swiper
React wrapper around iDangerous swiper that auto-magically re-initializes
https://github.com/nickpisacane/react-dynamic-swiper
react swiper
Last synced: 6 months ago
JSON representation
React wrapper around iDangerous swiper that auto-magically re-initializes
- Host: GitHub
- URL: https://github.com/nickpisacane/react-dynamic-swiper
- Owner: nickpisacane
- License: mit
- Created: 2016-08-01T01:08:38.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T01:01:26.000Z (over 2 years ago)
- Last Synced: 2025-04-04T22:42:21.122Z (6 months ago)
- Topics: react, swiper
- Language: JavaScript
- Homepage: https://nickpisacane.github.io/react-dynamic-swiper/
- Size: 7.38 MB
- Stars: 109
- Watchers: 5
- Forks: 32
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dynamic-swiper
[![Travis][travis-image]][travis-url]
React wrapper for [iDangerous-Swiper][idangerous-swiper] that auto-magically
reinitializes and updates when configuration changes.
**[Demo](https://nickpisacane.github.io/react-dynamic-swiper)**
# Installation
```sh
$ npm i --save react-dynamic-swiper
```
# Usage
```js
// Basic Usage
function MySwiper() {
return (
console.log('Slide Active!')} />
)
}
// Advanced Usage
//
// Swiper will automatically update swiper instance when children change (i.e. Slides),
// and/or re-initialize if swiper options change. Also, event handlers
// (`onTouchMove`, `onSlideChangeEnd`, etc.) are delegated. Changing them will
// require no reinitialization, while still functioning as expected.
import React, { Component } from 'react'
import { Swiper, Slide } from 'react-dynamic-swiper'
import 'react-dynamic-swiper/lib/styles.css'
class MySwiper extends Component {
constructor(props, context) {
super(props, context)
this.state = {
slides: []
}
}
componentWillMount() {
getAsyncSlideData().then(slides => this.setState({ slides }))
}
render() {
const { slides } = this.state
return (
}
prevButton={swiper => (
swiper.slideNext()} />
)}
onTouchMove={(swiper, event) => doSomething()}
>
{slides.map(slide => (
))}
)
}
}
```
# API
## Swiper
#### Props
- swiperOptions (Object) Options passed to swiper instance.
- containerClassName (String) Classname for underlying container element.
- wrapperClassName (String) Classname for underlying wrapper element.
- navigation (Boolean) Display navigation elements (`true`)
- nextButton (Element|Function) Navigation next element (`
`)
- prevButton (Element|Function) Navigation previous element (``)
- pagination (Boolean|Element|Function) Pagination is active by default, use `false` to hide. (``)
- paginationClickable (Boolean) Enable clickable pagination.
- scrollBar (Boolean|Element|Function) Scrollbar is hidden by default, use `false` to show.
- onInitSwiper (Function) Function invoked every time swiper instance is initialized, invoked will `swiper` as first argument.
- All event handlers are supported as well (i.e. onTouchMove, etc.)
_note_: The following props can be functions: nextButton, prevButton, pagination, and scrollBar. If functions, they
will be invoked with the underlying `Swiper` instance as the one and only argument. They must return a renderable element.
#### Methods
- swiper() Returns underlying swiper instance.
## Slide
#### Props
- onActive (Function) Invoked with swiper instance when `Slide` is active. Not invoked on initialization.
[idangerous-swiper]: http://idangero.us/swiper
[travis-image]: https://travis-ci.org/nickpisacane/react-dynamic-swiper.svg?branch=master
[travis-url]: https://travis-ci.org/nickpisacane/react-dynamic-swiper