Slick: Randomize Slides

[gmclelland]

Can you please tell me how I can randomize the order of the slides? I was hoping to show a different slide every time the page is reloaded.

Maybe there needs to be a setting for random: true or false?

[gmclelland]

This is example of what I would like to achieve http://owlgraphic.com/owlcarousel/demos/randomOrder.html

[DanielHitchen]

+1

[gmclelland]

Here is how I did it

$.fn.randomize = function(selector){
  var $elems = selector ? $(this).find(selector) : $(this).children(),
      $parents = $elems.parent();

  $parents.each(function(){
      $(this).children(selector).sort(function(){
          return Math.round(Math.random()) - 0.5;
      }).detach().appendTo(this);
  });

  return this;
};

// randomize the slides and then call slick
$('.view-billboard-rotator').find('.view-content').randomize('.views-row');


$('.view-billboard-rotator').find('.view-content').slick({
  fade: true,
  lazyLoad: 'ondemand',
  speed: 700,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 4000,
  slidesToShow: 1,
  slidesToScroll: 1,
  cssEase: 'linear'
});

Hope that helps someone.

[DanielHitchen]

Thanks for that. I just used the old NivoSlider random hack:

var total = $('.slick-slideshow img').length,
    rand = Math.floor( Math.random() * total );

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

Of course this only randomises the starting slide onLoad, but will try your method above also as would like to randomise all the slides prior to loading slick :)

[ptrwllrd]

please reconsider implementing this, it would be a very handy feature, especially coupled with lazy load

[flowdee]

+1

I think it wouldn't be that hard to enhance the initialSlide setting with a random functionality.

[codebakery-ch]

$("slick").on("init reInit", function() {
      var i = $('.tabnavdots_wrapper ul li').length;
      var initalSlide = $("slick").attr("random") ? Math.floor(Math.random() * i) : 0;
      $("slick").slick('slickGoTo', initalSlide);
  });

It might a little more complex than needed:
I am checking for a random attribute on the element. If there is one, I take the random key for the initial slide. If not, initial slide is 0. Just in case anyone needs this.

[Florencia007]

I'm not a developer. what is the final code? I just copy and paste it where? Thanks

[eigentor]

@gmaclelland thanks for the solution. It worked brilliantly for me.
As for .views-row selector this appears to be don in Drupal. I started out by randomizing the views rows in views, but found out this does not work with caching, so a Javascript solution was necessary...

[rohilv]

This being a 2014 issue and marked as feature request, I wanted to know whether this feature request been added to the Slick options already? Cant find it yet

[emsi68219]

Here is how I did it

$.fn.randomize = function(selector){
  var $elems = selector ? $(this).find(selector) : $(this).children(),
      $parents = $elems.parent();

  $parents.each(function(){
      $(this).children(selector).sort(function(){
          return Math.round(Math.random()) - 0.5;
      }).detach().appendTo(this);
  });

  return this;
};

// randomize the slides and then call slick
$('.view-billboard-rotator').find('.view-content').randomize('.views-row');


$('.view-billboard-rotator').find('.view-content').slick({
  fade: true,
  lazyLoad: 'ondemand',
  speed: 700,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 4000,
  slidesToShow: 1,
  slidesToScroll: 1,
  cssEase: 'linear'
});

Hope that helps someone.

I´m not a programmer. Can you please tell me, where I have to put this code to randomize caousel slides? Many thanks in advance,

René

[satendrasingh51]

This code not working on my project condition