Merge pull request #1029 from akiran/examples

slickPause and slickPlay example

Author: akiran

docs/demos.jsx

@@ -12,6 +12,7 @@ import UnevenSetsFinite from '../examples/UnevenSetsFinite'
 import CenterMode from '../examples/CenterMode'
 import FocusOnSelect from '../examples/FocusOnSelect'
 import AutoPlay from '../examples/AutoPlay'
+import AutoPlayMethods from '../examples/AutoPlayMethods'
 import PauseOnHover from '../examples/PauseOnHover'
 import Rtl from '../examples/Rtl'
 import VariableWidth from '../examples/VariableWidth'
@@ -40,6 +41,7 @@ export default class App extends React.Component {
         <CenterMode />
         <FocusOnSelect />
         <AutoPlay />
+        <AutoPlayMethods />
         <PauseOnHover />
         <Rtl />
         <VariableWidth />

examples/AutoPlayMethods.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import Slider from '../src/slider'
+
+export default class AutoPlayMethods extends Component {
+  constructor(props) {
+    super(props)
+    this.play = this.play.bind(this)
+    this.pause = this.pause.bind(this)
+  }
+  play() {
+    this.slider.slickPlay()
+  }
+  pause() {
+    this.slider.slickPause()
+  }
+  render() {
+    const settings = {
+      dots: true,
+      infinite: true,
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      autoplay: true,
+      autoplaySpeed: 2000
+    };
+    return (
+      <div>
+        <h2>Auto Play & Pause with buttons</h2>
+        <Slider ref={slider => this.slider = slider} {...settings}>
+          <div><h3>1</h3></div>
+          <div><h3>2</h3></div>
+          <div><h3>3</h3></div>
+          <div><h3>4</h3></div>
+          <div><h3>5</h3></div>
+          <div><h3>6</h3></div>
+        </Slider>
+        <div style={{textAlign: 'center'}}>
+          <button className='button' onClick={this.play}>Play</button>
+          <button className='button' onClick={this.pause}>Pause</button>
+        </div>
+      </div>
+    );
+  }
+}