diff --git a/examples/AutoPlay.js b/examples/AutoPlay.js
index 452ea8659..44fee0d8b 100644
--- a/examples/AutoPlay.js
+++ b/examples/AutoPlay.js
@@ -10,6 +10,7 @@ function AutoPlay() {
autoplay: true,
speed: 2000,
autoplaySpeed: 2000,
+ pauseOnFocus: true,
cssEase: "linear"
};
return (
diff --git a/examples/MultipleItems.js b/examples/MultipleItems.js
index 2634fdd93..889eaeddb 100644
--- a/examples/MultipleItems.js
+++ b/examples/MultipleItems.js
@@ -25,7 +25,7 @@ function MultipleItems() {
4
-
+ {/*
5
@@ -39,7 +39,7 @@ function MultipleItems() {
9
-
+
*/}
);
diff --git a/examples/SimpleSlider.js b/examples/SimpleSlider.js
index ee06df7a3..2a998383a 100644
--- a/examples/SimpleSlider.js
+++ b/examples/SimpleSlider.js
@@ -8,6 +8,7 @@ function SimpleSlider(props) {
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
+ initialSlide: 5,
...props
};
return (
diff --git a/src/dots.js b/src/dots.js
index 93520cbd7..4f0e1eb98 100644
--- a/src/dots.js
+++ b/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
};
diff --git a/src/inner-slider.js b/src/inner-slider.js
index b477bc2d1..35d1b906c 100644
--- a/src/inner-slider.js
+++ b/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,
diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js
index c5ce2f2da..23de16863 100644
--- a/src/utils/innerSliderUtils.js
+++ b/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,