【发布时间】：2015-08-04 23:39:17
【问题描述】：
我正在设置一个使用 Django 驱动的图像数据库工作的 Bootstrap Carousel。我在控制台日志中没有错误，正在加载 jQuery，等等，所以我肯定错过了一些非常明显的东西。它不会过渡到其他幻灯片，并且控件也不起作用。我曾尝试单独加载轮播库，但似乎没有任何效果。 我正在使用通过 Google 的 CDN 加载的 jQuery 1.11.0。 我正在使用通过 Django 中的静态文件提供的 jQuery 1.11.3。错误似乎在于 Django 如何加载各种 Javascript，但我不够精明，无法确定问题所在。
预计到达时间：
我在 jQuery 之后加载 bootstrap.min.js。我通常会运行一些自定义 JS，但我已经删除了该脚本进行测试。
这是生成轮播的 Django 代码：
{% 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>
这是生成的 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>
我一直得到的错误是
$(...).carousel() is not a function.
这可能是什么问题？正在找到所有文件，我已经尝试超时以确保所有内容都已加载，但无济于事。我正在运行通过 PHP/MySQL 提供的相同设置，它可以工作，所以 only 变量是 Django。加载静态文件时我缺少什么吗？
【问题讨论】：
-
你包括 bootstrap.min.js 吗？
-
@NikhilBatra - 是的。 js 加载如下 - jQuery，然后是 Bootstrap。
-
您是否尝试过设置超时来延迟轮播上的通话？
-
@Beauceron - 我尝试了 1 秒超时，得到了相同的 $(...).carousel() is not a function 错误。我会稍微花点时间看看这是否只是时间问题。 ETA：15 秒后，错误仍然存在。
-
你应该做一个 jsfiddle 看看它是否有效。也许页面中的其他内容使您的东西不起作用。
标签： javascript jquery css django twitter-bootstrap-3