Need a jquery slider that can scroll multiple divs in a random order

Question

I need to have a jQuery scroller/slider on my website that can scroll multiple div's in a random order.

For instance: I have few divs like:

<div>
   <div> Div 1</div>
   <div> Div 2</div>
   <div> Div 3</div>
   <div> Div 4</div>
   <div> Div 5</div>
   <div> Div 6</div>
<div>

And I would want them to autoscroll continuously but in a random order. like:

------------------------------------------------
<-- Div 3  |  Div 6 | Div 1 | Div 5 | Div 2 -->
------------------------------------------------

P.S: I have already tried content sliders like slick slider, ALS Scroller, Smooth Div Scroll and cycle jquery carousel. But non of them had the random sliding feature.

Any help would be greatly appreciated!

Thanks!

somthing like this ryrych.pl/rcarousel/examples/multi.html ? — Rajshekar Reddy
Does it have some feature that I can use to randomly display the divs? — Jane Watson
Yes, Its a carousel and you can use HTML inside the carousel and also specify which direction to move. Actually the link I provided was a example you can navigate to its document from the top of that page and explore some more functionalities. I think this will suit your requirement — Rajshekar Reddy

Yoan Yoan · Accepted Answer · 2016-02-25T23:22:24

It is true that slick carousel right now don't have a functionality such as you describe, however you can easily simulate that using some methods and events. You can use something like:

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

$('.slick-slideshow').slick({}).slickGoTo(rand);

To show a different slide every time the page is reloaded. Or you can insert some code on Next and Prev buttons and use slickGoTo function with random index every time.

Need a jquery slider that can scroll multiple divs in a random order

1 Answers