I am trying to use a bootstrap carousel in an angular spa application and am having issues getting it to slid automatically. If I put it in a regular html page everything works as expected. I have tried multiple solutions that I have found on stackoverflow (most are still in the code, but commented out), but nothing seems to work. Here are three of my files (app.js, index.html and home.html).
app.js
(function () {
'use strict';
window.app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl:'/views/stackoverflow/home.html',
onEnter: function() {
$('.carousel').carousel({interval: 300, pause:false});
//$('.carousel').carousel('cycle');
//$('.carousel').carousel().next();
//$('.carousel-control.right').trigger('click');
}
})
});
app.run(function($rootScope, $location) {
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
console.log("toState",toState);
if ( toState.templateUrl === '/views/stackoverflow/home.html' ) {
$('.carousel').carousel({interval: 300, pause:false});
$('.carousel').carousel('cycle');
//$('.carousel').carousel().next();
//$('.right.carousel-control').trigger('click');
//$('.right.carousel-control').click();
}
});
})
}());
Index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>My App</title>
<link href="http://netdna.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/content/bootstrap/css/bootstrap.css" />
<script src="/content/jquery/jquery.js"></script>
<style>
[ng-cloak] {display:none !important;}
</style>
</head>
<body>
<div ui-view ng-cloak></div>
</body>
<script src="/content/bootstrap/js/bootstrap.js"></script>
<script src="/content/angular/angular.js"></script>
<script src="/content/angular-ui-route/angular-ui-router.js"></script>
<script src="/app/app.js"></script>
</html>
Main.html
<nav class="navbar navbar-inverse navbar-static-top"> </nav>
<div class="container-fluid">
<div class="container-fluid">
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#product-info-carousel" data-slide-to="0" class="active"></li>
<li data-target="#product-info-carousel" data-slide-to="1"></li>
<li data-target="#product-info-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/images/image-1.png" alt="item1">
<div class="carousel-caption">
<h3>First Slide Label</h3>
<p>Praesent commodo cursus magna, vel</p>
</div>
</div>
<div class="item">
<img src="/images/image-2.png" atl="item2">
<div class="carousel-caption">
<h3>Second Slide Label</h3>
<p>Praesent commodo cursus magna, vel</p>
</div>
</div>
<div class="item">
<img src="/images/image-3.png" atl="item3">
<div class="carousel-caption">
<h3>Third Slide Label</h3>
<p>Praesent commodo cursus magna, vel</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#mainCarousel" 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="#mainCarousel" 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 class="container">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
<p>
</p>
</div>
</div>
</div>
</div>
