如何使用 bootstrap 4 和 aurelia 制作动态轮播

Question

想实现一个滑动图片的动态轮播滑块。图片来自后端，我在使轮播动态化方面遇到问题。它适用于 bootstrap 4 但对于静态，当我希望它与 aurelia 集成时它根本不起作用。

<div id="demo" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators" repeat.for="i of listOfImages.length">
        <li data-target="#demo" data-slide-to="i" class="${i==0 ? 'active': ''}"></li>
      </ul>
      <div class="carousel-inner">
        <div repeat.for="image of listOfImages" class="carousel-item ${i==0 ? 'active': ''}">
          <img src.bind="image" style="width:1900px;height:700px;">
        </div>
      </div>
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>

图片不显示，轮播根本不工作。有什么帮助吗？非常感谢

Answer 1

我用jQuery解决了，在接下来的路上。

<div ref="carousel" class="carousel slide" data-ride="carousel" data-interval="100">
      <!-- Indicators -->
      <ol class="carousel-indicators"></ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner"></div>
      <!-- Controls -->
      <a class="carousel-control-prev"  data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next"  data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>

carouselSlider() {
    var self = this;
    this.slider = $(this.carousel);

    $(document).ready(function () {
      $('.carousel').carousel({
        interval: 5000,
        pause: false
      })

      for (let j = 0; j < self.listOfImages.length; j++) {
        let image = self.listOfImages[j];
        $('<div class="carousel-item"><img src=' + image + ' width="50%">   </div>').appendTo('.carousel-inner');
        $('<li data-target="#carousel" data-slide-to="' + j + '"></li>').appendTo('.carousel-indicators')
      }

      $('.carousel-item').first().addClass('active');
      $('.carousel-indicators > li').first().addClass('active');

      $('a[data-slide="prev"]').click(function () {
        $(self.carousel).carousel('prev');
      });

      $('a[data-slide="next"]').click(function () {
        $(self.carousel).carousel('next');
      });

      self.slider.carousel();
    });
  }

并在 attached() 函数中调用 carouselSlider。

Answer 2

这应该适合你：

<div id="demo" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#demo"  repeat.for="i of listOfImages.length" data-slide-to.bind="i" class="${$first ? 'active': ''}"></li>
  </ul>
  <div class="carousel-inner">
    <div repeat.for="image of listOfImages" class="carousel-item ${$first ? 'active': ''}">
      <img src.bind="image" style="width:1900px;height:700px;">
    </div>
  </div>
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

解释：

您目前在每个 data-slide-to 中都有字母 i 作为纯文本。你的中继器放错标签了。您可以使用 $first 来更好地反映您正在尝试做的事情。

用JQ做这种工作是违背MVVM的思维方式的。

Answer 3

我也被困在这个问题上，主要是找到 bootstrap 3 个代码。这就是为什么我合并所有代码

我们应该有一组图像
现在首先我们需要在HTML

  <div
    id="carouselExampleIndicators"
    class="carousel slide"
    data-ride="carousel"
  >
    <ol class="carousel-indicators"></ol>

    <div class="carousel-inner"></div>
    <a
      class="carousel-control-prev"
      href="#carouselExampleIndicators"
      role="button"
      data-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a
      class="carousel-control-next"
      href="#carouselExampleIndicators"
      role="button"
      data-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

最后一步我们需要在上面的代码中添加图片

 $(document).ready(function () {
   var urls = []

        for (i = 0; i < urls.length; i++) {
          $(
            '<div class="carousel-item"><img src="' +
              urls[i] +
              '" class="d-block w-100">   </div>'
          ).appendTo(".carousel-inner");
          $(
            '<li data-target="#carouselExampleIndicators" data-slide-to="' +
              i +
              '"></li>'
          ).appendTo(".carousel-indicators");
        }

        $(".carousel-item").first().addClass("active");
        $(".carousel-indicators > li").first().addClass("active");
        $("#carouselExampleIndicators").carousel();
      });

只需将 urls 变量替换为您的图像数组即可粘贴上述代码

如何使用 bootstrap 4 和 aurelia 制作动态轮播

How to make dynamic carousel with bootstrap 4 and aurelia

typescript

aurelia