Question

我尝试用ng-repeat制作旋转木马。图像加载成功，但上一个和下一个按钮不起作用。这是我的代码

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item {{::($index === 0 ? 'active' : '')}}" ng-repeat="movie in popularMovies track by $index">
      <div class="row">
        <img class="d-block w-100" src="{{movie.image}}" alt="{{movie.name}}">
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 1

尝试将Angular Elements添加到下面的代码中，它将起作用。

我猜您的下一个和上一个版本无法正常工作，因为导入js文件时可能没有错误

如果这可以解决您的问题，请告诉我。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">

      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_1280.jpg" alt="{{movie.name}}">
    </div>
    <div class="carousel-item">

      <img class="d-block w-100" src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg" alt="{{movie.name}}">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

＆＃13;

AngularJS - ng-repeat with carousel

1 个答案: