0

I'm trying to build a dynamic multi-slide carousel with Django and Bootstrap.

Following the instructions laid out here, I've built the following but there is a problem with the html as the data from the model is not rendered on screen. (I am certain that it is a problem with the below as I have another similar carousel on the page which works fine).

template.html:

      <div class="container"> 
        <div id="modelCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            {% for modelInstance in modelData %}
            {% if forloop.first %}
            <li data-target="#modelCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#modelCarousel" data-slide-to="1"></li>
            <li data-target="#modelCarousel" data-slide-to="2"></li>
            {% endif %}
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <img data-src="{{ model.image }}">
            </div>
          </div>
          {% endfor %}
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="icon-prev" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="icon-next" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

Thanks!

Eddyhut
  • 55
  • 11

1 Answers1

0

Simplest way to explain it:

                     {% for modelInstance in modelData %}
          <img data-src="{{ model.image }}">