Reputation: 211
I'm setting up a Bootstrap Carousel working from a Django-powered image database. I have no errors in the console log, jQuery is loading, etc., so I'm definitely missing something painfully obvious. It does not transition to other slides, and the controls are not working either. I have tried loading the carousel library separately, and nothing seems to work. I'm using jQuery 1.11.0 loaded via CDN from Google. I'm using jQuery 1.11.3 served via Static files in Django. The error seems to be in how Django is loading the varied Javascripts, but I'm not savvy enough to determine what the issue is.
ETA:
I am loading bootstrap.min.js after jQuery. I normally have some custom JS running, but I've removed that script for testing.
Here's the Django code generating the carousel:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
{% include "menu.html" %}
<div class="container-fluid">
<div class="panel panel-primary shadow-normal">
<div class="panel-body">
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
{% for image in index_carousel %}
{% if forloop.first %}
<li data-target='#mycarousel' class='active' data-slide-to='{{ forloop.counter }}'></li>
{% else %}
<li data-target='#mycarousel' data-slide-to='{{ forloop.counter }}'></li>
{% endif %}
{% endfor %}
</ol>
<div class="carousel-inner">
{% for image in index_carousel %}
{% if forloop.first %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<img class="img-responsive" src="{{ image.carousel_image.url }}" alt="Carousel Slide - {{ image.alt_text }}">
</div>
{% endfor %}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
</div>
<script type="javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
$(document).ready( function() {
setTimeout( function() {
$('#mycarousel').carousel();
}, 15000)
});
</script>
</body>
Here's the generated HTML:
<!DOCTYPE html>
<html>
<head>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="panel panel-primary shadow-normal">
<div class="panel-body">
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target='#mycarousel' class='active' data-slide-to='1'></li>
<li data-target='#mycarousel' data-slide-to='2'></li>
<li data-target='#mycarousel' data-slide-to='3'></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="/media/carousel_images/staff_blogs.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/aarp-tax-help-slide_ZznUFS2.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/august_book_sale_new.png" alt="Carousel Slide - ">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
</div>
<script type="javascript" src="/static/js/bootstrap.min.js"></script>
<script>
$(document).ready( function() {
setTimeout( function() {
$('#mycarousel').carousel();
}, 15000)
});
</script>
</body>
</html>
The error I consistently get is
$(...).carousel() is not a function.
What could be the issue here? All the files are being found, and I've tried timeouts to make sure everything is loaded, but to no avail. I'm running this same setup served via PHP/MySQL, and it works, so the only variable is Django. Is there something I'm missing with loading the static files?
Upvotes: 0
Views: 621
Reputation: 106
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Please include the above lines, its working fine if I include the above.
Upvotes: 1