使用* ngFor时，Carousel Slider在Angular 8中不起作用

编程问答 2022-08-11

问题描述

我目前正在使用Angular8。我的滑块与static配合正常 数据。但是当我尝试遍历某些数据时，我的“左”和“右” 按钮不起作用。我无法滚动这些图片。我正在使用* ngfor获取图像。我已经看到许多解决方案。但是没有人能够解决我的问题。任何帮助 将不胜感激。谢谢

我的HTML代码 

<div class="container-fluid">
        <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner row w-10 mxauto" role="listBox">
                <div class="carousel-item col-md-4 active" *ngFor="let reward of readableRewards">
                    <img src="{{reward?.Image}}" class="img-fluid mx-auto d-bloc" alt="slide 1">
                </div>

            </div>
            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                <i class="fa fa-chevron-left fa-lg text-muted"></i>
                <span class="sr-only">PrevIoUs</span>
            </a>
            <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
                <i class="fa fa-chevron-right fa-lg text-muted"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

MY JS代码 

      $('#carouselExample').on('slide.bs.carousel',function (e) {

var $e = $(e.relatedTarget);

var idx = $e.index();
console.log("IDX :  " + idx);

var itemsPerSlide = 8;
var totalItems = $('.carousel-item').length;

if (idx >= totalItems-(itemsPerSlide-1)) {
    var it = itemsPerSlide - (totalItems - idx);
    for (var i=0; i<it; i++) {
        // append slides to end
        if (e.direction=="left") {
            $('.carousel-item').eq(i).appendTo('.carousel-inner');
        }
        else {
            $('.carousel-item').eq(0).appendTo('.carousel-inner');
        }
    }
}
});

我的CSS代码 

@media (min-width: 768px) {

  /* show 3 items */
  .carousel-inner .active,.carousel-inner .active + .carousel-item,.carousel-inner .active + .carousel-item + .carousel-item {
      display: block;
  }

  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
      transition: none;
      margin-right: initial;
  }

  .carousel-inner .carousel-item-next,.carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0,0);
  }

  .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
      position: absolute;
      top: 0;
      right: -33.3333%;
      z-index: -1;
      display: block;
      visibility: visible;
  }

  /* left or forward direction */
  .active.carousel-item-left + .carousel-item-next.carousel-item-left,.carousel-item-next.carousel-item-left + .carousel-item,.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(-100%,0);
      visibility: visible;
  }

  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      display: block;
      visibility: visible;
  }

  /* right or prev direction */
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right,.carousel-item-prev.carousel-item-right + .carousel-item,.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(100%,0);
      visibility: visible;
      display: block;
      visibility: visible;
  }

}

解决方法

这不是答案，而是一条可帮助您找到答案的路径。因为我不能写评论，但可以写答案，所以我会在这里写。由于滑块可以正常工作而不获取数据，因此问题在于获取数据。此部分代码未显示。但是，如果导致错误，则可能会因此进一步暂停执行。在控制台中查看或显示消息以及生成数据的代码，以便它们可以为您提供帮助。

angularbootstrap-4htmljavascripttypescripttypescript