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

这应该对您有用：

<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>

说明：

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

使用JQ进行此类工作违反了MVVM的思想。

Answer 2

接下来我用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 3

我也陷入了困境，并且为此找到了引导程序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制作动态旋转木马

3 个答案: