Angular UI-Bootstrap carousel not working

后端未结

关注

 2  895

I want to make a carousel using angular and Bootstrap but it simply doesn\'t work. I can\'t see the carousel at all and I see angular\'s brackett.

In other words, my res

相关标签:

2条回答

不思量自难忘°

2021-01-23 19:26

You can see a working sample in plunker link below.

Plunker

<uib-carousel interval="myInterval">
    <uib-slide ng-repeat="slide in slides" active="active" index="$index">
         <img ng-src="{{slide.image}}" style="margin:auto;">
          <div class="carousel-caption">
               <h4>Slide {{$index+1}}</h4>
          </div>
    </uib-slide>
</uib-carousel>

You are using the incorrect directives for the angular-ui.

Also, you are not defining the controller properly:

var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);

UPDATE

Complete working sample, even saved as a html file on your system.

<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);

function CarouselDemoCtrl($scope){
  $scope.myInterval = 3000;
  $scope.noWrapSlides = false;
  $scope.activeSlide = 0;
  $scope.slides = [
    {
      image: 'http://lorempixel.com/400/200/'
    },
    {
      image: 'http://lorempixel.com/400/200/food'
    },
    {
      image: 'http://lorempixel.com/400/200/sports'
    },
    {
      image: 'http://lorempixel.com/400/200/people'
    }
  ];
}
</script>
</head>
<body>
<div>
    Write your name here <input type="text" ng-model="name">
    Hi {{name}} Those are your photos:  
    <div ng-controller="CarouselDemoCtrl" id="slides_control">
        <div>
            <uib-carousel interval="myInterval" active="activeSlide">
                <uib-slide ng-repeat="slide in slides" index="$index">
                    <img ng-src="{{slide.image}}" style="margin:auto;">
                    <div class="carousel-caption">
                        <h4>Slide {{$index+1}}</h4>
                    </div>
                </uib-slide>
            </uib-carousel>
        </div>
    </div>
</div>  
</body>
</html>

0 讨论(0)

闹比i

2021-01-23 19:38

Problem Is in your html..

<div>
    Write your name here <input type="text" ng-model="name">
    Hi {{name}} Those are your photos:  
    <div ng-controller="CarouselDemoCtrl" id="slides_control">
        <div style="height:500px;">
            <div uib-carousel interval="myInterval" active="activeSlide">
                <div uib-slide ng-repeat="slide in slides" index="$index">
                    <img ng-src="{{slide.image}}" style="margin:auto;">
                    <div class="carousel-caption">
                        <h4>Slide {{$index+1}}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Use This Code Instead.

0 讨论(0)