0

I am trying to use a Twitter 3 Bootstrap carousel in my django template. The first "item" displays just fine but none of the others do- the "controls" don't do anything. Why are none of the other carousel items displaying?

<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">

Included Template:

{% 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>
steph
  • 701
  • 2
  • 10
  • 30
  • Imports added @Zartch A "regular" carousel worked fine, though. It was only after I tried to get my Django data in there that it stopped working... – steph Jan 08 '16 at 19:02
  • now paste the code in {% include 'databank/includes/dataset_item.html' with registration=registration %} XD – Zartch Jan 08 '16 at 19:05
  • include has been pasted.. – steph Jan 08 '16 at 19:15
  • @steph if you look at the console what is the error you're getting when you click the button? Do you get an error? Your templates look OK... Also you're importing jQuery twice - you should remove one of those. Last - can you confirm that the other items are appearing in the HTML? – YPCrumble Jan 09 '16 at 19:33

0 Answers0