I am using slick slider. I have three sliders on page, they all have same class and slick options. However I would like three different slick 'autoplaySpeed' option or add random delay on each for all three sliders instead of creating different class for every slider. Is that possible?

Three slides with same class name:

/

$('.slider').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

.flex-row {
  display: flex;
}

.slider {
  width: 33.33%;
  padding: 20px;
}

.slider div img {
  width: 100%;
  height: auto;
}

<div class="flex-row">
  <div class="slider">
    <div>
      <img src=".png" />
    </div>
    <div>
      <img src=".png" />
    </div>
  </div>
  <div class="slider">
    <div>
      <img src=".png" />
    </div>
    <div>
      <img src=".png" />
    </div>
  </div>
  <div class="slider">
    <div>
      <img src=".png" />
    </div>
    <div>
      <img src=".png" />
    </div>
  </div>
</div>

I am using slick slider. I have three sliders on page, they all have same class and slick options. However I would like three different slick 'autoplaySpeed' option or add random delay on each for all three sliders instead of creating different class for every slider. Is that possible?

Three slides with same class name:

https://jsfiddle/x78y143f/1/

$('.slider').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

.flex-row {
  display: flex;
}

.slider {
  width: 33.33%;
  padding: 20px;
}

.slider div img {
  width: 100%;
  height: auto;
}

<div class="flex-row">
  <div class="slider">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
  </div>
  <div class="slider">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
  </div>
  <div class="slider">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
  </div>
</div>

Expected result (three different 'autoplaySpeed' options):

https://jsfiddle/x78y143f/2/

$('.slider1').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

$('.slider2').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 5000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

$('.slider3').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 8000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

.flex-row {
  display: flex;
}

.slider1,
.slider2,
.slider3 {
  width: 33.33%;
  padding: 20px;
}

.slider1 div img,
.slider2 div img,
.slider3 div img {
  width: 100%;
  height: auto;
}

<div class="flex-row">
  <div class="slider1">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
  </div>
  <div class="slider2">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
  </div>
  <div class="slider3">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
  </div>
</div>

I would like that all three sliders have different start of slide change (slides in each slider do not have to change randomly).

• javascript
• jquery
• html
• slider
• slick.js

Share Improve this question Follow edited Sep 11, 2019 at 9:33 Pete 58.5k2929 gold badges130130 silver badges184184 bronze badges asked Sep 11, 2019 at 9:19 CodeAndCodeCodeAndCode 7911 gold badge11 silver badge77 bronze badges 2

• you could use an each loop and initiate each one with a random speed – Pete Commented Sep 11, 2019 at 9:24
• Could you please post some code and show how to do that. I am new to javascript so I would not know how to do that but I understand what you mean. – CodeAndCode Commented Sep 11, 2019 at 9:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can use an each loop on your original selector

$('.slider').each(function(index) {
  var randomSpeed = 1000 * (index + 1);  // code to calculate random speed here

  $(this).slick({
    arrows: false,
    infinite: true,
    speed: 1000,
    autoplay: true,
    autoplaySpeed: randomSpeed,
    fade: true,
    slidesToShow: 1,
    slidesToScroll: 1
  });
});

If you need to generate a proper random number, have a look at Math.random()