react-slider-swiper

react-slider-swiper
======================================

Inherit from react-id-swiper

Added : _Server Side Rendering_

> A library to use Swiper as a ReactJs component.

!Demo

What is Swiper?
===============

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

DEMO
====

You can see the demo with example code HERE

Installation

By npm

``bash
npm install --save react-slider-swiper
`

By Yarn
`bash
yarn add react-slider-swiper
`

Recommendation

>Swiper stylesheet file is required

$3

`css

`
`css

`

$3

Use stylesheet file from src/styles/ folder (supporting css, less, scss)

Usage

$3

>Example with default params

$3

`javascript
var React = require('react');
var Swiper = require('react-slider-swiper');

var Example = React.createClass({
render: function() {
return (



Slide 2

Slide 3

Slide 4

Slide 5

);
}
});

module.exports = Example;
`

$3


`javascript
import React from 'react';
import Swiper from 'react-slider-swiper';

class Example extends React.Component {
render() {

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

}
}

export default Example;
`

$3

>Example with navigation buttons

$3


`javascript
var React = require('react');
var Swiper = require('react-slider-swiper');

var Example = React.createClass({
render: function() {
var params = {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
};

return (
pagination={params.pagination}
paginationClickable={params.paginationClickable}
nextButton={params.nextButton}
prevButton={params.prevButton}
spaceBetween={params.spaceBetween}>

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

);
}
});

module.exports = Example;
`

$3

`javascript
import React from 'react';
import Swiper from 'react-slider-swiper';

class Example extends React.Component {
render() {
const params = {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
}



Slide 2

Slide 3

Slide 4

Slide 5

}
}

export default Example;
`

$3

>Example with navigation button

$3

`javascript
import React from 'react';
import Swiper from 'react-slider-swiper';

export default class Example extends React.Component {
constructor(props) {
super(props)
this.goNext = this.goNext.bind(this)
this.goPrev = this.goPrev.bind(this)
this.swiper = null
}

goNext() {
if (this.swiper) this.swiper.slideNext()
}

goPrev() {
if (this.swiper) this.swiper.slidePrev()
}

render() {
const params = {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
runCallbacksOnInit: true,
onInit: (swiper) => {
this.swiper = swiper
}
}

return(



)
}
}
`

$3

>Example with navigation button

`javascript
const params = {
pagination: '.swiper-pagination',
paginationCustomizedClass: 'customized-swiper-pagination', // Add your class name for pagination container
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
nextButtonCustomizedClass: 'nextButtonCustomizedClass', // Add your class name for next button
prevButtonCustomizedClass: 'customized-swiper-button-prev', // Add your class name for prev button
containerClass: 'customized-swiper-container' // Replace swiper-container with customized-swiper-container
spaceBetween: 30
}
`

>Available params for class name customization

You can use your own class name by using these params below

Params | Example
-------------------------- | -------------------------------
prevButtonCustomizedClass | 'customized-swiper-button-prev'
nextButtonCustomizedClass | 'customized-swiper-button-next'
paginationCustomizedClass | 'customized-swiper-pagination'
scrollbarCustomizedClass | 'customized-swiper-scrollbar'
containerClass | 'my-swiper-container'

NOTE: These 5 params above are only supported by React-id-swiper from v1.2.1.
You can find more customized class name params from Swiper API documentation

$3

You can check Swiper API documentation HERE

$3

First, clone this repo to your local

`bash
https://github.com/kidjp85/react-slider-swiper-demo.git
`

Install node packages

`bash
npm install
`
or

`bash
yarn
`

Run webpack server

`bash
yarn start
``

License

MIT