experimenting

examples/AutoPlay.js

@@ -10,6 +10,7 @@ function AutoPlay() {
     autoplay: true,
     speed: 2000,
     autoplaySpeed: 2000,
+    pauseOnFocus: true,
     cssEase: "linear"
   };
   return (

examples/MultipleItems.js

@@ -25,7 +25,7 @@ function MultipleItems() {
         <div>
           <h3>4</h3>
         </div>
-        <div>
+        {/*  <div>
           <h3>5</h3>
         </div>
         <div>
@@ -39,7 +39,7 @@ function MultipleItems() {
         </div>
         <div>
           <h3>9</h3>
-        </div>
+        </div> */}
       </Slider>
     </div>
   );

examples/SimpleSlider.js

@@ -8,6 +8,7 @@ function SimpleSlider(props) {
     speed: 500,
     slidesToShow: 1,
     slidesToScroll: 1,
+    initialSlide: 5,
     ...props
   };
   return (

src/dots.js

@@ -2,6 +2,7 @@
 
 import React from "react";
 import classnames from "classnames";
+import { dotClicked, initializedState } from "./utils/innerSliderUtils";
 import { clamp } from "./utils/innerSliderUtils";
 
 const getDotCount = spec => {
@@ -24,6 +25,11 @@ export class Dots extends React.PureComponent {
     // to next slide. That only goes away by click somewhere outside
     e.preventDefault();
     this.props.clickHandler(options);
+    document.activeElement.addEventListener("blur", event => {
+      if (!dotClicked()) {
+        this.props.autoPlayHandler("play");
+      }
+    });
   }
   render() {
     const {
@@ -34,6 +40,8 @@ export class Dots extends React.PureComponent {
       slidesToScroll,
       slidesToShow,
       slideCount,
+      autoplay,
+      autoplaying,
       currentSlide
     } = this.props;
     let dotCount = getDotCount({
@@ -65,6 +73,8 @@ export class Dots extends React.PureComponent {
         message: "dots",
         index: i,
         slidesToScroll,
+        autoplay,
+        autoplaying,
         currentSlide
       };
 

src/inner-slider.js

@@ -19,7 +19,12 @@ import {
   getPreClones,
   getPostClones,
   getTrackLeft,
-  getTrackCSS
+  getTrackCSS,
+  getActiveElementTagName,
+  getActiveParentTagName,
+  getActiveParentClassnames,
+  getActiveElementClassnames,
+  dotClicked
 } from "./utils/innerSliderUtils";
 
 import { Track } from "./track";
@@ -96,6 +101,7 @@ export class InnerSlider extends React.Component {
           slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null;
         }
       );
+    console.log(this.props.pauseOnFocus);
     if (window.addEventListener) {
       window.addEventListener("resize", this.onWindowResized);
     } else {
@@ -166,10 +172,11 @@ export class InnerSlider extends React.Component {
         }
       }
     }
-    // if (this.props.onLazyLoad) {
-    //   this.props.onLazyLoad([leftMostSlide])
-    // }
-    this.adaptHeight();
+    document.querySelectorAll &&
+      // if (this.props.onLazyLoad) {
+      //   this.props.onLazyLoad([leftMostSlide])
+      // }
+      this.adaptHeight();
     let spec = {
       listRef: this.list,
       trackRef: this.track,
@@ -438,6 +445,11 @@ export class InnerSlider extends React.Component {
       const nodes = this.list.querySelectorAll(".slick-current");
       nodes[0] && nodes[0].focus();
     }
+    window.addEventListener("click", event => {
+      if (this.props.autoplay && dotClicked()) {
+        this.pause("paused");
+      }
+    });
   };
   clickHandler = e => {
     if (this.clickable === false) {
@@ -669,11 +681,16 @@ export class InnerSlider extends React.Component {
         "children",
         "customPaging",
         "infinite",
-        "appendDots"
+        "appendDots",
+        "autoplay",
+        "autoplaying",
+        "autoplaySpeed"
       ]);
       const { pauseOnDotsHover } = this.props;
       dotProps = {
         ...dotProps,
+        autoPlayHandler: this.autoPlay,
+        pauseHandler: this.pause,
         clickHandler: this.changeSlide,
         onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null,
         onMouseOver: pauseOnDotsHover ? this.onDotsOver : null,

src/utils/innerSliderUtils.js

@@ -810,7 +810,28 @@ export const siblingDirection = spec => {
     return "left";
   }
 };
-
+export const getActiveElementClassnames = () => {
+  return document.activeElement.parentElement.classList.value.toString();
+};
+export const getActiveParentTagName = () => {
+  return document.activeElement.parentElement.tagName;
+};
+export const getActiveParentClassnames = () => {
+  return document.activeElement.parentElement.classList.value.toString();
+};
+export const getActiveElementTagName = () => {
+  return document.activeElement.tagName;
+};
+export const dotClicked = () => {
+  if (
+    getActiveParentTagName() === "LI" &&
+    getActiveParentClassnames() === "slick-active"
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+};
 export const slidesOnRight = ({
   slidesToShow,
   centerMode,