trying to make a carousel slider in django and trying to take picture from database then render on frontend

Question

I am trying to make a carousel slider. Picture comes from the database and then render it on the frontend slider. But the picture is rendering but it is creating new slider and when i change to next slide then it shows the same picture. What to do??

My code is here...

`{% for post in object_list %}
    <h2>{{ post.title }}</h2>
</ul>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="{{ post.image.url}}" class="d-block w-100" alt="{{ post.title }}">
    </div>
    <div class="carousel-item">
      <img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
    </div>
    <div class="carousel-item">
      <img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
{% endfor %}
{% endblock %}
`

Answer 1

At some point inside your views.py file you passed a context to your template for rendering, likely looking something like so:

post = ...
return render(request, "template_name", {"post": post})

Being that it is impossible for myself or anyone else to know what post contains, it is not possible for us to tell you exactly how to fix the issue. However, the issue lays in the repetition of this code:

<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="{{ post.image.url}}" class="d-block w-100" alt="{{ post.title }}">
    </div>
    <div class="carousel-item">
        <img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
    </div>
    <div class="carousel-item">
        <img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
    </div>
</div>

Clearly, you are using the same post.image.url variable for all three carousel-items. Assuming a post object can be multiple images, then something like so should work:

<div class="carousel-inner">
    {% for image in post.images %}
        <div class="carousel-item active">
            <img src="{{ image.url}}" class="d-block w-100" alt="{{ post.title }}">
        </div>
    {% endfor %}
</div>