Bootstrap carousel not working with angularjs

Question

I want to use bootstrap carousel along with angular js to display images in carousel content. But, when the navigation links clicked, it displays blank page.

My code sample is as follows. (Note : This code works well only with Bootstrap 3.1.0 but not along with AngularJS 1.2.13)

<div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/c.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/b.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/a.png" class="img-responsive">
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Following link is my demo. http://plnkr.co/edit/IVw6tSxi0VjhT2ppnaDZ?p=preview **Source** : I have used the demo code from the link http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating & modified it — Rakesh, Feb 21 '14 at 11:15
they're really asking a lot I think, when you have to jump through hoops like this just to use a Bootstrap component which JUST WORKS everywhere else. — Randy L, Jun 11 '15 at 00:05

score 71 · Answer 1 · answered Jun 10 '14 at 14:12

Building on what rbanning said, instead of adding the event handler you can just, after replacing the anchor tags with span tags, replace the href attribute with a "data-target" attribute and bootstrap takes care of the rest.

Like so:

<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
    <li data-target="Carousel" data-slide-to="0" class="active"></li>
    <li data-target="Carousel" data-slide-to="1"></li>
    <li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
    <div class="item active">
        <img src="images/c.png" class="img-responsive">
    </div>
    <div class="item">
        <img src="images/b.png" class="img-responsive">
    </div>
    <div class="item">
        <img src="images/a.png" class="img-responsive">
    </div>
</div>
<span class="left carousel-control" data-target="#Carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-target="#Carousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>

its not working for me as i m calling the function also $('#carousel').carousel('next'); while hitting next please help — ashishSober, Apr 30 '16 at 19:57

score 11 · Answer 2 · answered Apr 26 '14 at 19:13

As mentioned, the issue is with AngularJS and ngRoute intercepting the a-link clicks. I had this problem but did not want to use Angular UI Bootstrap (as described in other answers).

So, I changed the .carousel-control elements from links (a tags) to spans.

<span class="left carousel-control" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</span>

Then, I added an event handler as follows...

  $('.carousel').carousel({
                interval: 5000,
                pause: "hover",
                wrap: true
            })
            .on('click', '.carousel-control', handle_nav);

  var handle_nav = function(e) {
        e.preventDefault();
        var nav = $(this);
        nav.parents('.carousel').carousel(nav.data('slide'));
  }

Hope this helps...

great job, helped me and I have been trying to fix this for hours! — Eddie Martinez, Jun 28 '14 at 05:12
Its not working for me i dont know how it is working for u guys, — ashishSober, Apr 30 '16 at 19:44

score 8 · Answer 3 · answered Mar 02 '15 at 15:46

8

Set target="_self" in your carousel controls:

<a class="left carousel-control" href="#Carousel" data-slide="prev" target="_self">

answered Mar 02 '15 at 15:46

Robert Weindl

1,092
1
10
30

score 5 · Answer 4 · answered May 31 '14 at 10:15

5

If you don't need to bind your carousel, you can solve this by adding a top level element with ng-non-bindable directive:

<div ng-non-bindable>
    <div id="Carousel" class="carousel slide">
        <!-- carousel content -->
    </div>
</div>

answered May 31 '14 at 10:15

Arnau Aregall

51
1
3

score 4 · Answer 5 · answered Jul 01 '15 at 16:36

You can also just use ng-click on both controls.

I'm using this on my site (note href="" is blank now)

In view:

    <a class="left carousel-control" href="" ng-click="slide('prev')" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" ng-click="slide('next')" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>

In controller:

$scope.slide = function (dir) {
    $('#carouselId').carousel(dir);
};

This example is most likely to work in recent versions of angular and bootstrap. I have tested with version 1.4.9 and 3.3.6 respectively. — user2094178, Feb 06 '16 at 23:29

Chen-Tsu Lin · Answer 6 · 2014-02-20T13:23:29.833

0

Your code works fine.

No any problem in the code you showed.

http://plnkr.co/edit/1vq7DUXegQdBq3jvj7Zy?p=preview

edited Feb 20 '14 at 13:23

answered Feb 20 '14 at 13:17

Chen-Tsu Lin

22,876
16
53
63

1

he is explaining that his code does not work with angularjs – Enrique Martinez Apr 28 '19 at 01:12

jc-tzn · Answer 7 · 2014-02-21T15:29:02.033

0

Why not use Angular UI to get Bootstrap and Angular to play along nicely ?

http://angular-ui.github.io/bootstrap/#/carousel

EDIT:

Your code isn't working because on the navigation links you have href attributes set at #Carousel. So when you click on those links Angular router will try to change view and to display the one called Carousel which isn't defined in your $routeProvider hence the blank page.

Since you're using Bootstrap.js it seems like you absolutely need these href attributes so maybe get rid of the router. Or give a try to Angular UI ;)

edited Feb 21 '14 at 15:29

answered Feb 20 '14 at 14:59

jc-tzn

93
1
11

Can you just visit the demo link mentioned above & help me in fixing the problem? – Rakesh Feb 21 '14 at 11:29
I have used Angular UI to fix this issue. But it seems to be not working yet. Here is the [plunkerDemo](http://plnkr.co/edit/zwWfCGVBbQ4ej2JJ6dlq?p=preview) – Rakesh Feb 26 '14 at 09:34
I only see an `` element on your contact view, I though you wanted a carousel? – jc-tzn Feb 26 '14 at 13:19
I was looking for all the bootstrap elements like carousel/accordion/etc work with angular js. Now I got this working. [plunkerLink](http://plnkr.co/edit/EkZ8LmNx1mPwkIjnnSwF?p=preview) – Rakesh Mar 01 '14 at 05:24
Ok great ! I've added a `` in the about page for completeness sake (see [plunker](http://plnkr.co/edit/uXIpRbhBwVsDyfB8iV3u)), no more issues? – jc-tzn Mar 01 '14 at 10:35

score 0 · Answer 8 · answered Dec 17 '15 at 17:02

0

This works, without modify the original bootstrap example

$("a.carousel-control").click(function(e){
    e.preventDefault();
    $(this).parent().carousel($(this).data("slide"));
});

answered Dec 17 '15 at 17:02

ronald8192

5,003
2
14
23

score 0 · Answer 9 · answered Apr 06 '16 at 10:23

0

You can make function and place it on prev/next arrow in html.

$scope.prevSlide = function() {
    $('#MY-CAROUSEL-ID').carousel('prev');
};

answered Apr 06 '16 at 10:23

Jassma

1
1

Bootstrap carousel not working with angularjs

9 Answers9

Linked