尝试在 Django 中制作一个旋转木马滑块并尝试从数据库中拍照然后在前端呈现

Question

我正在尝试制作轮播滑块。图片来自数据库，然后在前端滑块上渲染。但是图片正在渲染，但它正在创建新的滑块，当我切换到下一张幻灯片时，它会显示相同的图片。怎么办？？

我的代码在这里...

`{% 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

在您的 views.py 文件中的某个时刻，您将一个 context 传递给您的模板进行渲染，可能看起来像这样：

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

由于我自己或其他任何人都不可能知道 post 包含的内容，因此我们无法确切地告诉您如何解决该问题。但是，问题出在这段代码的重复上：

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

显然，您对所有三个 carousel-items 使用相同的 post.image.url 变量。假设一个 post 对象可以是多个图像，那么像这样的东西应该可以工作：

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

Answer 2

我在从数据库中获取轮播图片时也遇到了同样的问题，但它只显示第一张图片，当我点击下一个按钮时，滑块没有改变。

所以朋友们不用担心我解决了问题首先想到的是在旋转木马图像中，您可以使用这样的代码使用 for 循环代替复制三个图像标签

<div class="carousel-inner">
    <div class="carousel-item {% if forloop.first %} active {% endif %}">
        <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>

在这段代码中，我只改变了轮播，你的问题是你的滑块没有改变，所以这样做你的滑板肯定会工作。

<div class="carousel-inner">
        <div class="carousel-item {% if forloop.first %} active {% endif %}">

尝试在 Django 中制作一个旋转木马滑块并尝试从数据库中拍照然后在前端呈现

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

django

slider

django-templates

carousel