TBG-React-Slider

Pure JS React image slider component with no CSS dependencies


Installation

$3

The simplest way to use TBG-React-Slider is to grab it from NPM and include it in your build process.
``
npm install tbg-react-slider --save
`

$3

TBG-React-Slider is packaged as an es6 module, so to import it use

`
import Slider from 'tbg-react-slider'
`

or to use it as a CommonJS module:
`
const TBGReactSlider = require('tbg-react-slider').default
`

Usage

$3

To use TBG-React-Slider at its most basic form

`
import React from 'react';
import ReactDOM from 'react-dom';

import Slider from 'tbg-react-slider';

ReactDOM.render(



Slide 2

Slide 3

Slide 4

,
document.getElementById('carousel')
);
`

$3

#### Default Props

`
className: 'slider'
arrows: true
dots: true
delay: 5000
autoplay: true
initialSlide: 0
direction: 'right'
transitionTime: 0.5
transition: Fade

onChange: () => { }
onShow: () => { }

dot: •
arrow: {
left: ‹,
right: ›,
}
`

$3

TBG-React-Slider doesn't depend on any external styles for functionality. However, it can be styled for UI and follows __BEM__ principles.

The default Block class is .slider and can be changed via passing a className string as a component prop.

Available styles based on the default Block .slider class:
`
.slider {}
.slider__wrapper {}
.slider__view {}
.slider__dots {}
.slider__dot {}
.slider__dot.is-active {}
.slider__arrow__wrapper {}
.slider__arrow__wrapper--right {}
.slider__arrow__wrapper--left {}
.slider__arrow {}
.slider__arrow--right {}
.slider__arrow--left {}
`

$3

TBG-React-Slider has some exposed component functions which can be used to navigate slides - start(), stop(), next(), prev() & goto(index)

To access these, add a ref to the component and they can then be referenced via this.refs.slider.next()

React Documentation


$3


#### Updated README to follow
__Example using react-hammerjs__
`
import Slider, { Transitions } from 'tbg-react-slider';
import Hammer from 'react-hammerjs';

class HammerJSExample extends React.Component {
handleSwipe(e) {
const dir = e.direction;
if (dir === 2) { this.refs.slider.nextSlide(); }
if (dir === 4) { this.refs.slider.previousSlide(); }
}

...

render() {
return (


...


);
}
}
`

Transitions

$3

TBG-React-Slider comes with a couple of pre-packed transitions which can be imported and passed as props to the slider component.

By default the Fade transition is used.

`
import Slider, { Transitions } from 'tbg-react-slider';


...


`

Packed transitions include: Fade, Slide, SlideDown

$3


To create a custom transition you can create method in Transitions
`
import Slider, { Transitions } from 'tbg-react-slider';

const Spin = Transitions.create({
start(dir, view) {
return {
transform:
translate(${view.width dir}px, ${view.height dir}px)
rotateZ(360deg)
,
};
},
end() {
return {
transform: 'translateX(0) rotateZ(0)',
};
},
transition(time) {
return {
transition: transform ${time}s,
};
},
});


...

``