The value from the array?

Good afternoon.

There are two arrays:
  1. Links to background images
    var background = [
    "images/slide_1.png",
    "images/slide_2.png",
    "images/slide_3.png"
    ];

  2. Headers
    var title = [
     "Text 1",
     "Text 2",
     "Text 3"
    ];



The second is obtained from the array of headers and replace them with interval:

rotateTitle function() {
 var ct = $("#title_text").data("title") || 0;
 $("#title_text").data("title", ct == title.length -1 ? 0 : ct + 1).text(title[ct])
 .fadeIn().delay(2000).fadeOut(200, rotateTitle);
}

$(rotateTitle);


Everything works perfectly.

Now we need a similar way to replace the background image of a certain diva.
Do this:

rotateBackground function() {
 var ct = $("#header").data("background") || 0;
 $("#header").data("background", ct == background.length -1 ? 0 : ct + 1).fadeIn()
 .css({'background' : 'url('+ background +') no-repeat', 'background-size':'cover'}).delay(2000).fadeOut(200, rotateBackground);
}

$(rotateBackground);


But get in style:
style="display: block; background: url('images/slide_1.png,images/slide_2.png,images/slide_3.png') 0% 0% / cover no-repeat;"

In other words, the whole array.

've just spent the last hour trying to figure it out.
Tell me which side to approach?

Thanks in advance.
July 9th 19 at 11:05
1 answer
July 9th 19 at 11:07
Solution
rotateBackground function() {
 var ct = $("#header").data("background") || 0,
 newCt = ct == background.length -1 ? 0 : ct + 1;

 $("#header").data("background", newCt).fadeIn()
 .css({'background' : 'url('+ background[newCt] +') no-repeat', 'background-size':'cover'}).delay(2000).fadeOut(200, rotateBackground);
}

Find more questions by tags JavaScriptjQuery