How to get current data slider when slider changes and when initial conditions?

I created a slider that has a data-banner attribute to send its data to Google Analytics.

I want the data sent to google analytics is the data from the current slide. I've made the script as below, but the Banner 1 data doesn't appear in the console when it's in the initial state. What I want is the first data banner is appear too. What is currently happening is when the slider changes, banner data appears (the initial not appears).

Can anyone help me?

$(document).ready(function(){
$('#carouselExampleSlidesOnly').on('slid.bs.carousel', function () {
    let currentActiveSlide = $('.carousel-item.active');

    if(currentActiveSlide){
            let dataBanner = $(currentActiveSlide).children('.main-banner-item').data('banner')
      let arrayPromotions = [];
      
      arrayPromotions.push({
        "id": dataBanner.id,
        "name": dataBanner.name
      })

      //gtag('event', 'view_promotion', {
      //  "promotions" : arrayPromotions
      //});
      
      console.log(arrayPromotions)
            console.log(dataBanner)
    }

})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="main-banner-item" data-banner='{"id": "1", "name": "Banner 1"}'> 
        Banner 1
      </div>
    </div>
    <div class="carousel-item">
      <div class="main-banner-item" data-banner='{"id": "2", "name": "Banner 2"}'> 
        Banner 2
      </div>
    </div>
    <div class="carousel-item">
      <div class="main-banner-item" data-banner='{"id": "3", "name": "Banner 3"}'> 
        Banner 3
      </div>
    </div>
  </div>
</div>

Solution

Here may this piece of code solve your issue.

var arrayPromotions = [];
var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel- item.active .main-banner-item").data("banner"); 
arrayPromotions.push({
  "id": firstSlide.id,
  "name": firstSlide.name
});

Please check if it's helpful to you or not.

$(document).ready(function(){
var arrayPromotions = [];
var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel-item.active .main-banner-item").data("banner"); 
arrayPromotions.push({
  "id": firstSlide.id,
  "name": firstSlide.name
});
console.log(arrayPromotions);
console.log(firstSlide);
//gtag('event', 'view_promotion', {
    //  "promotions" : arrayPromotions
//});
$('#carouselExampleSlidesOnly').on('slid.bs.carousel', function () {
    let currentActiveSlide = $('.carousel-item.active');

    if(currentActiveSlide){
            let dataBanner = $(currentActiveSlide).children('.main-banner-item').data('banner')
      let arrayPromotions = [];
      
      arrayPromotions.push({
        "id": dataBanner.id,
        "name": dataBanner.name
      })

      //gtag('event', 'view_promotion', {
      //  "promotions" : arrayPromotions
      //});
      
      console.log(arrayPromotions)
            console.log(dataBanner)
    }

})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="main-banner-item" data-banner='{"id": "1", "name": "Banner 1"}'> 
        Banner 1
      </div>
    </div>
    <div class="carousel-item">
      <div class="main-banner-item" data-banner='{"id": "2", "name": "Banner 2"}'> 
        Banner 2
      </div>
    </div>
    <div class="carousel-item">
      <div class="main-banner-item" data-banner='{"id": "3", "name": "Banner 3"}'> 
        Banner 3
      </div>
    </div>
  </div>
</div>