I know this has been asked in many questions, but the most common answer that jQuery isn't loaded doesn't work for me. It seems my jQuery is being loaded properly (version 1.10.2).
I am trying to run the following code (tried even in console, so the loading issue doesn't remain):
$('.carousel').on('mouseenter',function(){ $( this ).carousel();})
Bootstrap carousel by itself is working fine. It's just when am trying to initialize it dynamically, it's not working. (I just started with angular and bootstrap, so I might be missing something very simple here.) I am using angular js and bootstrap for my application.
EDIT: Here's my html code:
<div class="row" ng-controller="ItemGallery" style="padding-top:30px;">
<div class="col-md-4 item_card" ng-repeat="item in item_array">
<a href="{{'/product/id='+item.product_id}}" class="thumbnail">
<div id="{{'carousel_'+item.product_id}}" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="{{item.thumbnail}}" alt="{{item.product_title}}" class="img-responsive product-image"/>
</div>
<div class="item">
<img src="{{item.nutrition_thumbnail}}" alt="{{item.product_title}}" class="img-responsive nutri-image"/>
</div>
</div>
</div>
<div class="caption post-content">
<h4 class="h_no_margin">
<p class="pull-left title">{{item.product_title.toLowerCase() }}</p>
<p class="text-right">${{item.price}}</p>
</h4>
<small>
{{item.product_desc}}
</small>
</div>
</a>
</div>
</div>
Angular code:
var app = angular.module('item_gallery', []);
app.controller('ItemGallery', function($http, $scope, $location) {
$http.get("/product/list")
.success(function(response) {
$scope.item_array = response.response;
});
});
I used bower to take care of dependencies.
{
"name": "nutrinext",
"version": "0.0.0",
"dependencies": {
"angular": "~1.3.1",
"angular-bootstrap": "~0.11.2",
"angular-timeago": "~0.1.3",
"angular-ui-router": "~0.2.11",
"ngstorage": "~0.3.0",
"bootstrap": "~3.3.0",
"bootstrap-markdown": "~2.7.0",
"jquery": "1.10.2",
"fastclick": "~1.0.3",
"fontawesome": "~4.2.0",
"pubnub": "~3.6.4"
},
"devDependencies": {},
"resolutions": {
"angular": "~1.3.1",
"bootstrap": "~3.3.0"
}
}
I know this has been asked in many questions, but the most common answer that jQuery isn't loaded doesn't work for me. It seems my jQuery is being loaded properly (version 1.10.2).
I am trying to run the following code (tried even in console, so the loading issue doesn't remain):
$('.carousel').on('mouseenter',function(){ $( this ).carousel();})
Bootstrap carousel by itself is working fine. It's just when am trying to initialize it dynamically, it's not working. (I just started with angular and bootstrap, so I might be missing something very simple here.) I am using angular js and bootstrap for my application.
EDIT: Here's my html code:
<div class="row" ng-controller="ItemGallery" style="padding-top:30px;">
<div class="col-md-4 item_card" ng-repeat="item in item_array">
<a href="{{'/product/id='+item.product_id}}" class="thumbnail">
<div id="{{'carousel_'+item.product_id}}" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="{{item.thumbnail}}" alt="{{item.product_title}}" class="img-responsive product-image"/>
</div>
<div class="item">
<img src="{{item.nutrition_thumbnail}}" alt="{{item.product_title}}" class="img-responsive nutri-image"/>
</div>
</div>
</div>
<div class="caption post-content">
<h4 class="h_no_margin">
<p class="pull-left title">{{item.product_title.toLowerCase() }}</p>
<p class="text-right">${{item.price}}</p>
</h4>
<small>
{{item.product_desc}}
</small>
</div>
</a>
</div>
</div>
Angular code:
var app = angular.module('item_gallery', []);
app.controller('ItemGallery', function($http, $scope, $location) {
$http.get("/product/list")
.success(function(response) {
$scope.item_array = response.response;
});
});
I used bower to take care of dependencies.
{
"name": "nutrinext",
"version": "0.0.0",
"dependencies": {
"angular": "~1.3.1",
"angular-bootstrap": "~0.11.2",
"angular-timeago": "~0.1.3",
"angular-ui-router": "~0.2.11",
"ngstorage": "~0.3.0",
"bootstrap": "~3.3.0",
"bootstrap-markdown": "~2.7.0",
"jquery": "1.10.2",
"fastclick": "~1.0.3",
"fontawesome": "~4.2.0",
"pubnub": "~3.6.4"
},
"devDependencies": {},
"resolutions": {
"angular": "~1.3.1",
"bootstrap": "~3.3.0"
}
}
3 Answers
Reset to default 12I had the same issue, What I was missing was including bootstrap.js in my index.html, and after adding following it worked.
<script type="text/javascript" src="components/bootstrap/dist/js/bootstrap.js"></script>
You just have to set Your script in the bottom of html body.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Boostrap carousel-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<!--YOUR CAROUSEL BODY HERE-->
<h1>Look on the code example</h1>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('.carousel').carousel({
interval: 550 * 10
});
});
</script>
</html>Try changing the order of the tags which has the materialize.js, it worked for me!
Specifically, you should maintain this order of the scripts in the source code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
and not the other way around.
$. It says thatcarouselis not a function. Where did you definecarousel? – Quentin Commented Jun 15, 2015 at 10:47$(this).slick();slick – befzz Commented Jun 15, 2015 at 10:54