Проблема добавления упорядоченных списков динамически к ползунку bootstrap

Question

Что касается ползунка bootstrap на w3schools здесь Я пытаюсь заставить работать ползунок, не добавляя упорядоченные списки вручную.

HTML:

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg">
      </div>

      <div class="item">
        <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg">
      </div>

      <div class="item">
        <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg">
      </div>

    </div>
</div>

JS:

var numSlides = $('.item').length;

setTimeout(function(){

  $("<ol class='carousel-indicators'></ol>").insertBefore('.carousel-inner');


  for(i = 1; i <= numSlides; i++) {
    $("<li data-target='#myCarousel' data-slide-to=''+ i + ''></li>").appendTo('.carousel-indicators');
  }

  $('.carousel-indicators > li:first-child').addClass('active');
}, 1000);

Когда я загружаю страницу, содержимое фактически скользит, но я замечаю, что индикаторы не работают, когда я нажимаю на них, и не подсвечиваются, когда изменения слайдов.

Как мне настроить слайдер bootstrap в соответствии с моими потребностями?

codepen

Answer 1

Кажется, в вашем коде есть опечатки, поэтому добавленный вами код html неверен. Я думаю, что для l oop должно понравиться это:

for(i = 0; i < numSlides; i++) {
    $("<li data-target='#myCarousel' data-slide-to='" + i + "'></li>").appendTo('.carousel-indicators');
}

Я изменил data-slide-to=''+ i + '' на data-slide-to='" + i + "' и i должен начинаться с 0

Надеюсь, эта помощь.