2 background image slider with image array

Question

i want to use two different image sliders which use different images. The images should be shown depending on the class of the container. imgArray for the container with the class .second-row1 and imgArray2 for the container with the class .second-row2. Unfortunately it only shows the images of the imgArray for both containers. Does somebody know why?

 var imgArray = [
  '/wp/wp-content/uploads/2020/09/image.jpg',
  '/wp/wp-content/uploads/2020/09/image2.jpg',
  '/wp/wp-content/uploads/2020/09/image3.jpg',
];

var imgArray2 = [
  '/wp/wp-content/uploads/2020/09/image4.jpg',
  '/wp/wp-content/uploads/2020/09/image5.jpg',
  '/wp/wp-content/uploads/2020/09/image6.jpg',
];

function swapImages(index, slider) {
  var nextBG = 'url(' + imgArray[index] + ') no-repeat bottom center';
  jQuery(slider).fadeOut('slow', function () {
  jQuery(this).css('background', nextBG).fadeIn('slow');
  });
}

function bgImageSlider(slider, imgArray) {
  let index = 0;
  let interval = 4000;

  swapImages(index, slider);

  setInterval(function () {
    index += 1;

     if (imgArray.length === index) {
     index = 0;
    }

    swapImages(index, slider);
  }, interval); // 3 second interval
}

 bgImageSlider('.second-row1', imgArray);
 bgImageSlider('.second-row2', imgArray2);
0
tom84 4 months 0 Answers 32 views 0

Leave an answer