React-slick: Autoplay not working

[colmbegs89]

I am not able to get autoplay to work in any browser

```var React = require('react');
var Slider = require('react-slick').default;
var slider1 = require('../img/FMF2018_New_Slider_Dec.jpg')
var slider2 = require('../img/Hallow.jpg')

class Carousel extends React.Component {
render () {
var settings = {
dots: true,
infinite: true,
arrows: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
swipeToSlide: true,
autoPlay: true,
autoplaySpeed: 1000
};
return (

  </Slider>
);

}
}
export default Carousel

"dependencies": {
"axios": "^0.16.2",
"jquery": "^3.2.1",
"prop-types": "^15.6.0",
"react": "^15.6.2",
"react-dom": "^15.6.2",
"react-scripts": "1.0.12",
"react-slick": "^0.16.0",
"react-tweet-embed": "^1.0.8",
"react-twitter-embedded-timeline": "^0.4.0",
"xml2js": "^0.4.19"
},

[Wgil]

The property is called autoplay in lowercase, does it solve your problem?

[colmbegs89]

@Wgil no I had tried that and a few other variations based on solutions to other issues but nothing has worked so far :(

[colmbegs89]

found an alternate solution with some extra code ...cheers though

[puja1234]

I am not able to get autoplay to work in any browser on touch screens (eg:- mobile devices).

import Slider from 'react-slick';
var slider2 = require('../img/Hallow.jpg')

`class Carousel extends React.Component {
render () {
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay:true,
};
return (
{ /content/ }

  </Slider>
);

}
}
export default Carousel

"dependencies": {
"axios": "0.16.2",
"babel-polyfill": "6.23.0",
"clean-webpack-plugin": "0.1.17",
"express": "4.15.3",
"file-saver": "1.3.3",
"fs-extra": "3.0.1",
"has-flag": "2.0.0",
"isomorphic-fetch": "2.2.1",
"json-loader": "0.5.4",
"lodash": "4.17.4",
"moment": "2.18.1",
"prop-types": "15.5.8",
"react": "15.5.4",
"react-bootstrap": "0.31.0",
"react-bootstrap-date-picker": "5.1.0",
"react-custom-scrollbars": "4.1.2",
"react-dom": "15.5.4",
"react-fontawesome": "1.6.1",
"react-google-maps": "8.3.3",
"react-infinite-scroll-component": "2.3.0",
"react-redux": "5.0.5",
"react-router": "4.1.1",
"react-router-config": "1.0.0-beta.3",
"react-router-dom": "4.1.1",
"react-slick": "0.14.11",
"redux": "3.6.0",
"redux-logger": "3.0.6",
"remote-redux-devtools": "0.5.12",
"slick-carousel": "1.6.0",
"webpack": "2.6.1",
"yaml-loader": "0.4.0"
}`

[Ram-SR]

found an alternate solution with some extra code ...cheers though

What did you do?

[colmbegs89]

``
this was a while ago, but i ended up with a component and the current code is here (old project)
comp.txt

[colmbegs89]

@Ram-SR

[Ram-SR]

@Ram-SR

Thanks for the response. I'm using react-slick version 0.23.2 and autoplay is not working.

Here is my configuration

    const sliderSettings = {
      autoplay: true,
      autoplaySpeed: 1000,
      dots: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      speed: 1000,
      vertical: true,
    };

[colmbegs89]

@Ram-SR from what i remember we had the correct code but had to force it to 0.16.0 for autoplay to run

[Ram-SR]

The problem is from my end. The component which is holding <Slider> is getting painted again and again because of state change from redux. So, the slick is getting initialised again. That's why it's not working. I just need to scroll automatically. So, I'm using CSS animation now.

[arhoy]

Is it possible to keep autoplay when the user hoever over the picture? Mine stops autoplay when I hover

Thank you!

[antoniojps]

@arhoy just set the prop pauseOnHover to false.
https://react-slick.neostack.com/docs/api#pauseOnHover