我正在尝试在我的引导程序 4 网站中使用基于角度的轮播。当我使用bootstrap 3(bootstrap.min.css(时，它工作得很好。当我尝试更改引导程序 4 (bootstrap.min.js( 时，它不起作用。我不知道如何修改引导 4 角度版本的轮播滑块。我已经尝试了下面的代码。任何人都帮助我实现这一目标。
JSFIDDLE 链接
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>最好的方法是 UI 引导程序 4 中的轮播指令
UI 引导程序 4
由 AngularUI 团队用纯 AngularJS 编写的引导组件
由 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>
轮播依赖于依赖于 Angleular-UI-bootstrap，而 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">
然后删除引导程序3
正如Tieson在评论中已经提到的，这主要是因为多个jQuery引用了你的代码。