Как я могу выбрать следующий предмет в Bootstrap 4 Карусели?

Question

Я построил ленивый загрузчик для моей Bootstrap 4 Карусели, чтобы все изображения не загружались на страницу одновременно. Работает нормально, но я пытаюсь найти способ загрузить следующее изображение в последовательности, чтобы не было перерывов при переходе. Если я использую $ (this), а затем получаю значение data (), я получаю текущий активный слайд. Поэтому я попытался нацелиться на следующий элемент .carousel, используя $ (this) .next ('. Carousel-item'), но я получил 'undefined'.

<div class="carousel-item active" data-index="01">
    <div class="gallery-image" style="background-image: url(xxx );"></div>
</div>

<div class="carousel-item" data-index="02">
    <div class="gallery-image" data-background-image="YYY" style="background-image: url(ZZZ); "></div>
</div>

$('#hero-slideshow-guestrooms').on('slide.bs.carousel', function (e) { // BEFORE SLIDE
    $(e.relatedTarget).find('.gallery-image').each(function () {
      var $next = $(this).next('.carousel-item');
      var $nextbgrdimage = $next.data('background-image');
      if (typeof $nextbgrdimage !== "undefined" && $nextbgrdimage != "") {    
        $next.css('background-image', 'url(' + $nextbgrdimage + ')');
        $next.css('background-size', 'cover');
        $next.data('background-image', ''); // clean up
      }
    });
  });

Теперь я понимаю, что мне нужно найти следующий элемент карусели, а затем изображение галереи в этом следующем элементе карусели. Таким образом, вышесказанное совершенно неправильно - но я не знаю, как это сделать.