javascript - Random slide order in slick image slider - Stack Overflow

admin管理员组

文章数量:1345088

I am using

      var allslides = document.querySelector(".lazy");
        for (var i = allslides.children.length; i >= 0; i--) {
          allslides.appendChild(allslides.children[Math.random() * i | 0]);
        };

to randomize the slide order in Slick carousal (image slider).

Here ".lazy" is:

<section class="lazy slider" data-sizes="50vw">
  <div><img src="1.png"/</div>
  <div><img src="2.png"/</div>
  <div><img src="3.png"/</div>
  <div><img src="4.png"/</div>
</section>

All is fine except a blank slide (or a white gap) gets inserted. Just can't get rid of it. Any clues or cues?

I am using

      var allslides = document.querySelector(".lazy");
        for (var i = allslides.children.length; i >= 0; i--) {
          allslides.appendChild(allslides.children[Math.random() * i | 0]);
        };

to randomize the slide order in Slick carousal (image slider).

Here ".lazy" is:

<section class="lazy slider" data-sizes="50vw">
  <div><img src="1.png"/</div>
  <div><img src="2.png"/</div>
  <div><img src="3.png"/</div>
  <div><img src="4.png"/</div>
</section>

All is fine except a blank slide (or a white gap) gets inserted. Just can't get rid of it. Any clues or cues?

• javascript
• random
• slider
• slick.js

Share Improve this question Follow edited Apr 16, 2020 at 7:46 Richard Dallaway 4,33011 gold badge2929 silver badges3939 bronze badges asked Apr 20, 2018 at 21:58 Platform anthropocene Inc.Platform anthropocene Inc. 5111 gold badge11 silver badge77 bronze badges 2

• Take a look at the answer to this question: stackoverflow./questions/2450954/… – J. Kamien Commented Apr 20, 2018 at 22:03
• Is this meant to answer my question? Could you please tell what I should be looking for? – Platform anthropocene Inc. Commented Apr 20, 2018 at 22:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You don't really need to manipulate the DOM at all. Simply hook into the goto method and randomly navigate to a different slide.

This is one of many possible implementations:

var total = $('.slick-slideshow img').length, // get the number of slides
    rand = Math.floor( Math.random() * total ); // random number

$('.slick-slideshow').slick({
    autoplay: true,
    autoplaySpeed: 7000,
    arrows: false,
    fade: true,
    slide: "img",
    pauseOnHover: false
})
.slickGoTo(rand); //navigate to random slide

You can learn more in this discussion: https://github./kenwheeler/slick/issues/359

本文标签： javascriptRandom slide order in slick image sliderStack Overflow