react-dynamic-swiper

React wrapper for iDangerous-Swiper that auto-magically reinitializes and updates when configuration changes.

Demo

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.
• wrapperClassName (String) Classname for underlying wrapper element.
• navigation (Boolean) Display navigation elements (true)
• nextButton (Element|Function) Navigation next element (<div className="swiper-button-next" />)
• nextButton (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" />)
• 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.