jQuery 和 bootstrap 轮播

Question

我正在尝试在 jQuery 中创建 img 并向幻灯片添加轮播，但在此代码中 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
  });
});

Answer 1

它没有显示，因为 bootstrap 轮播需要一个 active 项目开始，你忘记添加 active class 到第一个 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>

jQuery 和 bootstrap 轮播

jQuery and bootstrap carousel

jquery

twitter-bootstrap-3