Angular UI-Bootstrap carousel not working

Question

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 result is:

Hi {{name}} Those are your photos: Slide {{$index+1}}

This is my index.html

<!doctype html>
<html ng-app="app">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
</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">
                    <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>
            </div>
        </div>
    </div>  
</body>
</html>

and this is my javascript script.js

var myApp = angular.module('app', ['ui.bootstrap']);
myApp.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
    $scope.myInterval = 3000;
    $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'
                     }
                   ];
});

EDIT I changed the codes above according to what the answer below says. It still doesn't work

You never actually define a controller. See docs.angularjs.org/guide/controller — str
– str, Commented Mar 3, 2016 at 12:49
You already have this example working in a codepen as a first result of Google codepen.io/Fabiano/pen/LACzk you copy pasted some where and it is not working — Prasad
– Prasad, Commented Mar 3, 2016 at 12:52
as str said update your code with app.controller('CarouselDemoCtrl', CarouselDemoCtrl); before function — Prasad
– Prasad, Commented Mar 3, 2016 at 12:55
angular-ui.github.io/bootstrap/#/carousel use appropriate directives — Prasad
– Prasad, Commented Mar 3, 2016 at 12:56
To answer N.V.Prasad, That link is exactly where I took it from. I don't understand why it doesn't work on me — user5880775
– user5880775, Commented Mar 3, 2016 at 13:02

Mihail Stancescu · Accepted Answer · 2016-03-03 13:35:20Z

3

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>

edited Mar 3, 2016 at 13:35

answered Mar 3, 2016 at 12:52

Mihail Stancescu

4,1681 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user5880775 Over a year ago

I changed the code (See the question above) but it still doesn't work

Mihail Stancescu Over a year ago

Are you getting any java script errors? Can you replicate it in a plunker? Also try to add the $scope.active=0 in the controller. And the ng-controller should be set on the parent div to correctly work. It works because Angular tries to match the property by going up until the rootview.

user5880775 Over a year ago

Ok. I replicate it in a plunker and it works... So what may be the problem?

Mihail Stancescu Over a year ago

There may be a number of reasons. You need to say how are you hosing the page, and if there are any errors in console.

user5880775 Over a year ago

I just have a question: in my script I already had var routingApp=angular.module('routingApp',['ngRoute']); because I need ngRoute; now I also need ui.bootstrap; is it possible to define them both?

|

Dhiresh Budhiraja · Accepted Answer · 2017-08-16 06:53:17Z

0

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.

answered Aug 16, 2017 at 6:53

Dhiresh Budhiraja

2,7355 gold badges19 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular UI-Bootstrap carousel not working

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related