jquery-backstretch.js background slider - How to cycle through images?

Question

JavaScript

There is a jquery-backstretch background image slider.
Official page on github: https://github.com/srobbin/jquery-backstretch
Demo: "http://srobbin.com/jquery-plugins/backstretch/
(Attach Backstretch to click events)

Actually, the question itself:
How can I implement cyclic scrolling of images, by pressing the button? i.e. the image scrolls to the right, but with another click it goes back to the first image.Now
the initialization occurs with the following code:

$("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('img/slider/bg-slider1.jpg');
  });

  $("#cheers").click(function(e) {
    e.preventDefault();
    $.backstretch('img/slider/bg-slider2.jpg');



  });

Please help)

Answer 1

Get an array with paths to pictures, get a numeric variable by clicking on the right or left, it increases or decreases.
Then the condition if it is less than zero, then the value is equal to the length of the array, if it is greater than the length of the array, then it is equal to zero.
Well, in the function itself, on click, you pull from the image array, like:

var arr = ['...' , '...'] //твои пути
var num = 0;


$("#cheers").click(function(e) { // это например вправо
    if(num == arr.length-1){
        num = 0;
    }
    else{
      num++;
    } 
    e.preventDefault();
    $.backstretch(arr[num]);

  });