Bootstrap5 Carousel with await promise

Question

I've got a bootstrap5 carousel which works fine until I generate the carousel after the Promise is fulfilled. See the example below, if I UNcomment the row in the start() function it stops working and only the first image is displayed.

Does anybody know why I cannot generate carousel dynamically once some Promise is fullfiled?

  <body>
   <div class="carousel-wrapper">
   </div>
  </body>
 
  <script> 

  function insertCarousel() {
    let carousel = `<div class="col-md-4">
            <!-- carousel start -->
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                <img class='tempimg' src="./items_photos/10_100.jpeg" data-trueimg="./items_photos/10_100.jpeg" class="d-block w-100" width="250" height="250" alt="...">
                </div>
                <div class="carousel-item">
                <img class='tempimg' src="./items_photos/10_200.jpeg" data-trueimg="./items_photos/10_200.jpeg" class="d-block w-100" width="250" height="250" alt="...">
                </div>
                <div class="carousel-item">
                <img class='tempimg' src="./items_photos/1_200.jpeg" data-trueimg="./items_photos/1_200.jpeg" class="d-block w-100" width="250" height="250" alt="...">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
            </div>
            <!-- carousel end -->
            </div>`;

        document.querySelector('.carousel-wrapper').insertAdjacentHTML('beforeend', carousel);
  }
  
  function delay() {
      return new Promise((resolve, reject) => {
        setTimeout(resolve,1000);
      });
  }
  async function start() {
    /* if I apply the following row, carousel stops working and it just displays the first image */
    // await delay(); 
    insertCarousel();
  }

  start();

  </script>

Answer 1

I have sorted it out. I had to initiate a new carousel and run cycle method. See the code:

 function delay() {
      return new Promise((resolve, reject) => {
        setTimeout(resolve,1000);
      });
  }
  async function start() {
    await delay();
    insertCarousel();
    let myCarousel = document.querySelector('#carouselExampleIndicators');
    let carousel = new bootstrap.Carousel(myCarousel, {
      interval: 3000
      }).cycle();
  }
 
start();

Bootstrap5 Carousel with await promise

Question

1 answers

solution1
0 2021-10-13 06:50:11

Bootstrap5 Carousel with await promise

Question

1 answers

solution1 0 2021-10-13 06:50:11

solution1
0 2021-10-13 06:50:11