Блог

Главная - Вопросы по программированию - 2 слайдера фонового изображения с массивом изображений

2 слайдера фонового изображения с массивом изображений

#jquery #image

#jquery #изображение

Вопрос:

я хочу использовать два разных слайдера изображений, которые используют разные изображения. Изображения должны отображаться в зависимости от класса контейнера. imgArray для контейнера с классом .second-row1 и imgArray2 для контейнера с классом .second-row2. К сожалению, он показывает только изображения imgArray для обоих контейнеров. Кто-нибудь знает, почему?

      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, imageArray) {
      var nextBG = 'url('   imageArray[index]   ') no-repeat bottom center';
      jQuery(slider).fadeOut('slow', function () {
      jQuery(this).css('background', nextBG).fadeIn('slow');
      });
    }

    function bgImageSlider(slider, images) {
      let index = 0;
      let interval = 4000;
  
      swapImages(index, slider, imgArray);
  
      setInterval(function () {
      index  = 1;
  
      if (images.length === index) {
      index = 0;
      }
  
      swapImages(index, slider, imgArray);
      }, interval); // 3 second interval
      }

    bgImageSlider('.second-row1', imgArray);
    bgImageSlider('.second-row2', imgArray2);

Ответ №1:

Вам также нужно будет передать массив изображений в функцию swapImages

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

и в bgImageSlider

   swapImages(index, slider, imgArray);

Комментарии:

1. спасибо за ваш ответ… я отредактировал свой код. но у меня та же проблема, что и раньше. пожалуйста, взгляните на мой код в вопросе

2. Можете ли вы предоставить пример или ссылку?

3. raepitzer-aussicht. уберите два слайдера фона (рядом с полями violett)

4. Вы передаете массив изображений в bgImageSlider named images , но затем переходите к вызову swapImages(index, slider, imgArray); . Измените его на swapImages(index, slider, images);