title: Carousel with Bootstrap and Django
body: <p>I am trying to implement a simple Carousel with Bootstrap in a Django project.
  Somehow the loop works but only the active is shown, I cant go to the next and prev image.</p>
  <p><a href="https://i.stack.imgur.com/N82H6.png" rel="nofollow noreferrer">The carousel-items are greyd out</a></p>
  <pre><code>&lt;!--Carousel--&gt;
  &lt;div class='row'&gt;
    &lt;div id=&quot;carouselExampleControls&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
      &lt;div class=&quot;carousel-inner&quot;&gt;
        {% if labelimages %}
        {% for image in labelimages %}
          &lt;div class=&quot;carousel-{% if forloop.first %}active{% else%}item{% endif %}&quot;&gt;
            &lt;img class=&quot;d-block w-100&quot; src=&quot;{{ image.url }}&quot; alt=&quot;Third slide&quot;&gt;
          &lt;/div&gt;
        {% endfor %}
        {% endif %}
        &lt;div class=&quot;carousel-item&quot;&gt;
          &lt;img class=&quot;d-block w-100&quot; src=&quot;{{ image.url }}&quot; alt=&quot;Third slide&quot;&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
        &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
        &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>