jquery - Javascript slideshow background with images in order -

i have following code rotate through images. need images go in order rather random. need change code in order make happen?

<div class="test" data-slides='[     "images/video/images/img_0001.jpg",     "images/video/images/img_0002.jpg",     "images/video/images/img_0003.jpg",     "images/video/images/img_0004.jpg",     "images/video/images/img_0005.jpg",     "images/video/images/img_0006.jpg",     "images/video/images/img_0007.jpg",     "images/video/images/img_0008.jpg",     "images/video/images/img_0009.jpg" ]'></div>  <script> ! function(t) { "use strict"; var = t("[data-slides]"),     s = a.data("slides"),     e = s.length,     n = function() {         a.css("background-image", 'url("' + s[math.floor(math.random() * e)] +             '")').show(0, function() {             settimeout(n, 3.33e+2)         })     }; n() }(jquery); </script> 

quite simple

• add c counter variable , loop images using s[c++%e]
• instead of settimeout use .delay(2e3).show(0, n)

;(function(t) {    "use strict";    var = t("[data-slides]"),        s = a.data("slides"),        e = s.length,        c = 0,             // add counter        n = function() {          a.css("background-image", 'url("' + s[c++%e] + '")').delay(2e3).show(0, n);        };    n();  }(jquery));

[data-slides]{height:100vh;background: none 50%;background-size: cover;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="test" data-slides='[  "//placehold.it/800x600/0bf?text=1",  "//placehold.it/800x600/fb0?text=2",  "//placehold.it/800x600/f0b?text=3"  ]'></div>

...or simpler operating on array:

var = t("[data-slides]"),     s = a.data("slides"),     n = function() {       a.css("background-image", 'url("'+ s[0] +'")').delay(2000).show(0, n);       s.push(s.shift());     }; n();