Question

我正在尝试在bootstrap 4网站中使用基于角度的轮播。当我使用bootstrap 3（bootstrap.min.css）时，它的工作正常。当我尝试更改bootstrap 4（bootstrap.min.js）时，它不起作用。我不知道如何修改Bootstrap 4 Angle版本的圆盘传送带滑块。我尝试了下面的代码。任何人都可以帮助我实现这一目标。

jsfiddle link

angular.module('app', ['ui.bootstrap']);

function CarouselDemoCtrl($scope) {
  $scope.myInterval = 3000;
  $scope.slides = [{
      image: 'https://eadb.org/wp-content/uploads/2013/09/placeholder.jpg'
    },

    {
      image: 'https://eadb.org/wp-content/uploads/2013/09/placeholder.jpg'
    },

    {
      image: 'https://eadb.org/wp-content/uploads/2013/09/placeholder.jpg'
    },

    {
      image: 'https://eadb.org/wp-content/uploads/2013/09/placeholder.jpg'
    }
  ];


}
//# sourceURL=pen.js

#slides_control>div {
  height: 200px;
}

img {
  margin: auto;
  width: 400px;
}

#slides_control {
  position: absolute;
  width: 400px;
  left: 50%;
  top: 20px;
  margin-left: -200px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- ========== Meta Tags ========== -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Association - Corporate Business Template">
  <title>Template</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <!--<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> -->


</head>

<body>

  <div ng-app="app">
    <div ng-controller="CarouselDemoCtrl" id="slides_control">
      <div>
        <carousel interval="myInterval">
          <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}">
            <div class="carousel-caption">
              <h4>Slide {{$index+1}}</h4>
            </div>
          </slide>
        </carousel>
      </div>
    </div>
  </div>


  <!-- boostrap 4 -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <!-- boostrap 4 -->

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</body>

</html>

Answer 1

最好的方法是在ui bootstrap 4中使用轮播指令

UI Bootstrap 4

由AngularUI团队以纯AngularJS编写的Bootstrap组件

由Morgul移植到Bootstrap 4

<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
  <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{slide.id}}</h4>
      <p>{{slide.text}}</p>
    </div>
  </div>
</div>

Answer 2

轮播依赖于angular-ui-bootstrap，后者依赖于bootstrap3

您正在使用bootstrap4，因此angular-ui-bootstrap输出错误的html

更改：

<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">

收件人：

<div uib-slide class="carousel-item" ng-repeat="slide in slides track by slide.id" index="slide.id">

然后删除bootstrap3

Answer 3

正如Tieson在评论中已经提到的那样，这可能主要是因为多个jQuery引用了您的代码。

Bootstrap 4轮播无法与angular js一起使用

3 个答案:

UI Bootstrap 4