Django Bootstrap Carousel

时间:2016-01-08 18:30:13

标签: django twitter-bootstrap django-templates bootstrap-carousel

我正在尝试在我的django模板中使用Twitter 3 Bootstrap轮播。第一个“项目”显示正常,但其他人都没有 - “控件”不做任何事情。为什么没有其他轮播项目显示?

<div class="container-fluid recent">
  <h2>Recently Published Datasets</h2>

  <div id="recent-carousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    {% for registration in recent_registrations %} 
    <div class="carousel-inner" role="listbox">
      {% if forloop.first %}
      <div class="active item">
      {% else %}
      <div class="item">
      {% endif %}
        <div class="col-md-6 col-md-offset-3">
          {% include 'databank/includes/dataset_item.html' with registration=registration %}
        </div>
      </div>
    </div>
    {% endfor %}

    <!-- Controls -->
    <a class="left carousel-control" href="#recent-carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#recent-carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

  </div> <!-- Carousel -->

</div>

IMPORTS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="{{STATIC_URL}}css/bootstrap_css/bootstrap.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{STATIC_URL}}js/bootstrap_js/bootstrap.min.js"></script>
<link href="{{STATIC_URL}}css/bootstrap_css/bootstrap.css" rel="stylesheet">

包含的模板:

{% load databank_filters %}

<a class="pull-left" href="{% url 'databank:dataset' registration.dataset.dataset_id %}">
  {% if registration.dataset.dataset_image %}
  <img class="media-object img-thumbnail" src="{{ registration.dataset.dataset_image.url }}" onerror="if (this.src != '{{ MEDIA_URL }}/thumbnails/default/sbgrid_logo_circle.png') this.src = '{{ MEDIA_URL }}/thumbnails/default/sbgrid_logo_circle.png';" style="height: 130px; width: 130px">
  {% else %}
  <img class="media-object img-thumbnail" src="{{ MEDIA_URL }}/thumbnails/default/sbgrid_logo_circle.png" alt="Data Image Here" style="height: 130px; width: 130px">
  {% endif %}
</a>


<div class="media-body no-top-margin">
  <a href="{% url 'databank:dataset' registration.dataset.dataset_id %}" role="link"><h3 class="media-heading">{{ registration.dataset.dataset_name }}</h3></a>
  <p>{{ registration.dataset.dataset_description }}</p>

</div>

0 个答案:

没有答案