Unable to create Bootstrap carousel infused by AngularJs

Question

I'm using AngularJS to build my app and I wanted to add a bootstrap carousel, using angular bootstrap elements. Due to this bug (another link), I decided to drop the angular bootstrap library and use the regular bootstrap carousel, but infuse it with angular power. I'm generating the slides using ng-repeat, but for some reason when the page renders, the slides are stacked up one over another. JSfiddle here.

HTML:

<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active" ng-repeat="slide in slides">
          <img src="{{slide.image}}" alt="Chania" width="460" height="345">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control carControl" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control carControl" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#myCarousel").carousel({
      interval: 4000
    })
  });

  $(".carControl").click(function(e) {
    e.preventDefault();
  });

</script>

JS:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  var slides = [{
    image: "http://static.tumblr.com/5e956872e3d338a2733c6fe3d69a940b/avddr52/UT5n3bshv/tumblr_static_peter_dinklage_as_tyrion_lannister_game_of_thrones_wallpaper.jpg",
    id: 1,
    text: "tyrion"
  }, {
    image: "http://static.independent.co.uk/s3fs-public/thumbnails/image/2015/06/15/09/jon-snow.jpg",
    id: 2,
    text: "jon snow"
  }, {
    image: "http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/daenarys-1024.jpg",
    id: 3,
    text: "khalisi"
  }, {
    image: "http://vignette1.wikia.nocookie.net/gameofthrones/images/b/be/Gregor_Clegane_4x07.jpg/revision/latest?cb=20140707234843g",
    id: 4,
    text: "gregor"
  }];

  $scope.slides = slides;
});

There is a link to JS fiddle, after the problem description :) Just abovr the HTML code. — Alex, Mar 06 '16 at 13:14
You need to call the carousel function which runs before the ng-repeat is complete. — Ikechi Michael, Mar 06 '16 at 13:20
@IkechiMichael could you provide a working fiddle with your suggestion? It doesnt work for me, or I misunderstood you. — Alex, Mar 06 '16 at 13:30

score 2 · Accepted Answer · answered Mar 06 '16 at 13:46

2

Use this in place of your ng-repeat div

<div class="item" ng-class="{active: ($index == 0)}" ng-repeat="slide in slides">
                    <img ng-src="{{slide.image}}" alt="Chania" width="460" height="345">
                </div>

answered Mar 06 '16 at 13:46

Ikechi Michael

489
3
6

score 1 · Answer 2 · answered Mar 06 '16 at 13:57

As @Ikechi Michael already pointed out you were making all the slides as active by giving them active class, so you need to use ng-class to only make first slide as active. Here is the plunkr link for the same.

http://plnkr.co/edit/8fvo62X2Yn8jvwgOme8V?p=preview

<div class="item" ng-class="{'active': $index===0}" ng-repeat="slide in slides">
  <img src="{{slide.image}}" alt="Chania" width="460" height="345">
</div>

Unable to create Bootstrap carousel infused by AngularJs

2 Answers2