static propTypes = {

children: array,

visibleSlides: number,

slideBy: number

}

constructor (props) {

super(props)

this.state = {

toggle: true,

visibleSlides: this.props.visibleSlides || 3,

slideBy: this.props.slideBy

}

}

render () {

const { children } = this.props

const { toggle } = this.state

const setTrackRef = (name) => (ref) => { this[name] = ref }

const next = () => this.track.next()

const prev = () => this.track.prev()

return (

<div>

<div className="options">

<label className="option">

<span className="label">un/mount Tack</span>

<input

type="checkbox"

defaultChecked

onClick={({ target: t }) => { this.setState({ toggle: t.checked }) }}

/>

</label>

<label className="option">

<span className="label">visible slides</span>

<input

type="number"

name="visibleSlides"

value={this.state.visibleSlides}

onChange={({ target: t }) => { this.setState({ visibleSlides: Number(t.value) }) }}

/>

</label>

<label className="option">

<span className="label">slide by</span>

<input

type="number"

name="slideBy"

id="slideBy"

value={this.state.slideBy}

onChange={({ target: t }) => { this.setState({ slideBy: Number(t.value) }) }}

/>

</label>

</div>

{ toggle

? <div className="slider">

<Track

ref={setTrackRef}

visibleSlides={this.state.visibleSlides}

className="track"

slideClass="slideClassName"

startAt={4}

onSlideClick={() => { console.log('You clicked on a slide!') }}

slideBy={this.state.slideBy}

animationDuration={1000}

easing={(t) => t}

>{ children }</Track>

<div className="controls">

<button className="prevButton" onClick={prev}>Let me see that beard again!</button>

<button className="nextButton" onClick={next}>I wanna see more beards!</button>

</div>

</div>

: null }

</div>

)

}