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,