CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapcarousel
Lotus_8
Lotus_8

Reputation: 199

Angular.js with Bootstrap carousel only one nav dot showing up

I am trying to integrate Bootstrap Carousel into my Angular app and I am having some issues getting the nav dots to show up for each image and I am also having an issue getting the navigation arrows to move back and forth between slides.

Here is part of my html template with the carousel:

  <div id="myCarousel" class="carousel slide" data-ride="carousel" ng-init="getCars()">

 //////////section for nav dots///////////////

<ol class="carousel-indicators" ng-repeat="car in cars">
          <li data-target="#myCarousel" data-slide-to="{{$index}}" ng-class="{active:!$index}"></li>
        </ol>

/////////////section for carousel images////////////////////

        <div class="carousel-inner">
          <div class="item" ng-class="{active:!$index}" ng-repeat="car in cars">
            <img class="first-slide" src="{{car.picture.url}}" alt="First slide" style="margin:auto">
            <div class="container">
              <div class="carousel-caption">
                <h1>{{car.make}} {{car.model}}</h1>
              </div>
            </div>
          </div>
        </div>

//////////section for nav arrows///////////////

        <a class="left carousel-control" 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" 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>

The nav dots are not working as only one shows up. The images are automatically cycled through so I no the carousel image section is working to some degree. If I write out the individual <li>s for nav dots I am able to swap between the images in the carousel. So something is off with my ng-repeat in that section and it is probably some noob mistake.

As for the arrow function I am not sure how to make those link up with my current set up. Any suggestions there would be great also. One step at a time though first the nav dots. Thanks for trying to help!

Upvotes: 0

Views: 668

Answers (1)

B&#252;nyamin Sarıg&#252;l
B&#252;nyamin Sarıg&#252;l

Reputation: 3091

I am not sure without seeing the controller but 

ng-init="getCars()"

may need to be

ng-init="cars=getCars()"

Upvotes: 1

Related Questions