CODEWITHSUNDEEP
jquery
DerickB
DerickB

Reputation: 119

Flexslider random order after animation

I'm trying to randomize the slide order on a flexslider. The random option only allows you to randomize the order on load. I pieced together the code below with the help of this: Flexslider Start at a random slide and then continue loading sequentially

Any idea what I'm doing wrong?

$(window).load(function() {
  var randomthis = Math.floor((Math.random()* $('.flexslider li').length )+1);
  $('.flexslider').flexslider({
    after: function(slider) {
    startAt: randomthis
    },
  });
});

Upvotes: 2

Views: 1254

Answers (2)

unijad
unijad

Reputation: 161

here's a working mockup of your code, use startAt instead of after function; http://jsbin.com/kunizo/1/edit?js,output

$(window).load(function() {
  // create function that returns random number
  var random = function(num){
    var numRandom = Math.floor((Math.random()* num ));
    return numRandom;
  };
  // create variable with slides length;
  var slidesLength = $('.flexslider li').length
  // init flexslider and start at random number
  $('.flexslider').flexslider({
    startAt: random(slidesLength)
  });
});

Upvotes: 0

Cerlin
Cerlin

Reputation: 6722

FlexSlider supports randomizing slides. You can use the below code

$(window).load(function() {
    $('.flexslider').flexslider({
        randomize: true
    });
});

For your requirement you can use the following code.

$(window).load(function() {
    var randomthis = Math.floor((Math.random()* $('.flexslider li').length ));
    $('.flexslider').flexslider({
        after: function(slider) {
            startAt: randomthis
        },
    });

    // **CAUTION** the below code will remove ALL the setTimeouts
    var highestTimeoutId = setTimeout(";");
    for (var i = 0 ; i < highestTimeoutId ; i++) {
        clearTimeout(i); 
    }

    // This code will add a new setTimeout function for randomizing the
    a = function(){ 
        var newrandval = Math.floor((Math.random()* $('.flexslider li').length ));
        while(randomthis == newrandval){
            newrandval = Math.floor((Math.random()* $('.flexslider li').length ))
        }
        randomthis = newrandval;
        $('.flexslider').flexslider(randomthis); setTimeout(a,3000)
    }
    a();
});

Upvotes: 2

Related Questions