jQuery и bootstrap карусель - PullRequest
Новая
       4

jQuery и bootstrap карусель

1 голос
/ 24 февраля 2020

Я пытаюсь создать img в jQuery и добавить карусель к слайду, но в этом коде img не показывает 

$(document).ready(function(e) {
  imgSlider = [1, 2, 4];
  imgTitle = ["apartement", "pool", "Beach"];
  $(".carousel").append("<div class='carousel-inner'></div>");
  for (i = 0; i < 3; i++) {
    imgSrc = "images/slider" + imgSlider[i] + ".jpg";
    imgT = imgTitle[i];
    $(".carousel-inner").append("<div class=item><img title=" + imgT + " src=" + imgSrc + " /></div>");

  }
  $('#mySlider').carousel({
    interval: 3000
  });
});

1 Ответ

0 голосов
/ 24 февраля 2020

Это не отображается, потому что bootstrap карусели для начала нужен элемент active, вы забыли добавить active класс к первому item, ниже после for вы можете увидеть: 

$(document).ready(function(e) {
  let active;
  imgSlider = [1, 2, 4];
  imgTitle = ["apartement", "pool", "Beach"];
  $(".carousel").append("<div class='carousel-inner'></div>");
  for (i = 0; i < 3; i++) {
    if (i == 0) {
      active = 'active'
    }
    imgSrc = "images/slider" + imgSlider[i] + ".jpg";
    imgT = imgTitle[i];
    $(".carousel-inner").append("<div class='item " + active + "'><img title=" + imgT + " src=" + imgSrc + " /></div>");

  }
  $('#mySlider').carousel({
    interval: 3000
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="carousel slide" id="mySlider" data-ride="carousel"></div>
...