Как сделать динамическую карусель с бутстрапом 4 и аурелией - PullRequest
Новая
       41

Как сделать динамическую карусель с бутстрапом 4 и аурелией

0 голосов
/ 27 декабря 2018

Я хочу реализовать динамический карусельный слайдер для скользящих картинок.Картинки идут с бэкэнда, у меня проблемы с динамикой карусели.Он отлично работает с 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>

Изображения не отображаются и карусель не работает вообще.Любая помощь ?Большое спасибо

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

это должно работать для вас: 

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

0 голосов
/ 27 декабря 2018

Я решил это с помощью 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();
    });
  }

и вызовом carouselSlider в присоединенной функции ().

...