nickpisacane / React Dynamic Swiper
Licence: mit
React wrapper around iDangerous swiper that auto-magically re-initializes
Stars: ✭ 109
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Dynamic Swiper
stimulus-carousel
A Stimulus controller to deal with carousel.
Stars: ✭ 22 (-79.82%)
Mutual labels: swiper
Flutter swiper
The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.
Stars: ✭ 3,209 (+2844.04%)
Mutual labels: swiper
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+26981.65%)
Mutual labels: swiper
bootstrap-shopify-theme
🛍 A free Shopify Theme built with Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, ... and Webpack.
Stars: ✭ 41 (-62.39%)
Mutual labels: swiper
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (+310.09%)
Mutual labels: swiper
vue-active-swiper
🌴 A Mobile-oriented、No dependencies、Lightweight Swiper component for Vue
Stars: ✭ 33 (-69.72%)
Mutual labels: swiper
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-11.01%)
Mutual labels: swiper
react-awesome-swiper
Swiper4 component for React, support pc and mobile,support typescript
Stars: ✭ 17 (-84.4%)
Mutual labels: swiper
pinar
🌲☀️ Customizable, lightweight React Native carousel component with accessibility support.
Stars: ✭ 214 (+96.33%)
Mutual labels: swiper
Tiny Swiper
Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
Stars: ✭ 1,061 (+873.39%)
Mutual labels: swiper
React Id Swiper
A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build
Stars: ✭ 1,361 (+1148.62%)
Mutual labels: swiper
React Native Snap Carousel
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
Stars: ✭ 9,151 (+8295.41%)
Mutual labels: swiper
Shuffle
🔥 A multi-directional card swiping library inspired by Tinder
Stars: ✭ 535 (+390.83%)
Mutual labels: swiper
react-dynamic-swiper
React wrapper for iDangerous-Swiper that auto-magically reinitializes and updates when configuration changes.
Installation
$ npm i --save react-dynamic-swiper
Usage
// Basic Usage
function MySwiper() {
return (
<Swiper
swiperOptions={{
slidesPerView: 42
}}
navigation={false}
pagination={false}
>
<Slide onActive={swiper => console.log('Slide Active!')} />
</Swiper>
)
}
// 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 (
<Swiper
swiperOptions={{
slidesPerView: 'auto'
}}
nextButton={<MyNextButton />}
prevButton={swiper => (
<MyPrevButton onClick={() => swiper.slideNext()} />
)}
onTouchMove={(swiper, event) => doSomething()}
>
{slides.map(slide => (
<Slide {...slide} />
))}
</Swiper>
)
}
}
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 (
<div className="swiper-button-next" />
) - prevButton (Element|Function) Navigation previous element (
<div className="swiper-button-prev" />
) - pagination (Boolean|Element|Function) Pagination is active by default, use
false
to hide. (<div className="swiper-pagination" />
) - 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].