在 Django 中使用轮播显示图像答案

【问题标题】：Display images with carousel in Django在 Django 中使用轮播显示图像
【发布时间】：2020-05-19 12:00:43
【问题描述】：

我在显示图像时遇到问题，轮播上总是打印相同的图像。

图像 URL 没有问题 bot 我在轮播中只看到一个相同的图像。我知道因为 for 循环有 3 个不同的图像，但是当我删除它时，轮播不起作用

我尝试的方法如下。

{% for i in ads%}
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="/image/{{i.image_ads}}" class="d-block w-100" alt="Image no:1">
    </div>
    <div class="carousel-item">
      <img src="/image/{{i.image_ads}}"class="d-block w-100" alt="Image no:2">
    </div>
    <div class="carousel-item">
      <img src="/image/{{i.image_ads}}"class="d-block w-100" alt="Image no:3">
    </div>
  </div>
</div>
{%endfor %}

【问题讨论】：

标签： django django-templates

【解决方案1】：

在轮播 div 中移动你的 for 循环。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    {% for i in ads%}
    <div class="carousel-item">
        <img src="/image/{{i.image_ads}}" class="d-block w-100" alt="Image no:{{ forloop.counter }}">
    </div>
    {%endfor %} 
  </div>
</div>

【讨论】：

感谢您的回答，但是现在我用这种方法只能查看单个图像并且它不会移动。我有几张图片。
那么我认为您可能需要在问题中提供更多关于您的ads 对象结构的信息。另外，您想要一个轮播，还是多个轮播？
我想使用一个轮播，广告只有名称和 image_ads = models.ImageField(upload_to='image',blank=True,verbose_name="Image of Ad") 这种模型类型。跨度>
那么我认为我的答案是正确的。问题可能出在您的轮播上，而不是 Django。如果你有三张图片，我写的循环应该添加三遍carousel-item。

【解决方案2】：

当通过数据库为轮播渲染数据到模板时，活动类似乎给许多初学者带来了问题。当您使用 for 循环逻辑迭代前端的滑块时，循环将创建三个轮播，每个轮播都设置为活动的。为避免这种情况，您可以在 for 循环中使用 if-else 语法。一个简单的例子就是这个。

<div class="carousel-inner" role="listbox">
    {% for j in image_slider %}
          <!--You need to add forloop here -->
            <div class="carousel-item {% if forloop.first %} active {% endif %}">
                <img src="{{j.slider_img.url}}">
                <div class="carousel-caption text-center">
                    <h1>{{j.main_heading}}</h1>
                    <h3>{{j.sub_heading}}</h3>
                </div>
            </div>
    {% endfor %}

check here for more detail

【讨论】：