Django旋转木马画廊底部使用models.py的小图片

Question

带转盘的画廊

我在所附图片上创建了一个类似的图库。当我从硬盘链接图片时，我没有问题。我可以在主转盘视图中预览这些小图片，方法是点击它们，也可以使用转盘上的控制按钮。

我的问题是，当从模型加载图片时，如何具有相同的功能？点击后的小图像随机显示在主转盘视图上。如何将数据bs幻灯片链接到="或者还有其他选择？

下面的代码来自于从硬盘驱动器和使用数据库。

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">


<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static 'bpage/img/f1r.jpg' %}" class="rounded d-block img-fluid mx-auto"  alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f2r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f3r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600"  alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f4r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600"  alt="...">
</div>
</div>
<!--rest of the carousel-->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>

<!--- imagaes below carousel-->

<div class="row" >
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">
<div class="row row-cols-2 row-cols-sm-4">
<div class="col">
<img src="{% static 'bpage/img/f1r.jpg' %}"  class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="0">
</div>
<div class="col">
<img src="{% static 'bpage/img/f2r.jpg' %}"  class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="1">
</div>
<div class="col">
<img src="{% static 'bpage/img/f3r.jpg' %}"  class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="2">
</div>
<div class="col ">
<img src="{% static 'bpage/img/f4r.jpg' %}"  class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="3">
</div>
</div>
</div>  
</div> ```
Gallery created with models.py
```<div class="container">
<div class="row ">
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">

{% for product in products %}

<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img src="{{ product.image.url }}" class="rounded d-block img-fluid mx-auto" height="600"  alt="...">
</div>

{% endfor %}

</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--- imagaes below carousel-->
<div class="container">
<div class="row" >
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">
<div class="row row-cols-sm-4 row-cols-2">

{% for product in products %}
<img src="{{ product.image.url }}" class="rounded mt-2" data-bs-target="#carouselExampleControls" data-bs-slide-to="">
{% endfor %}

</div>
</div>  
</div> ``` 

Answer 1

您是否使用for循环从模型中获取图像？如果你是，那么你可能可以这样映射它：

data-bs-slide-to="{{ forloop.counter |add:"-1" }}

假设你使用for循环来显示每个图像，它会将你的缩略图反向链接到你的图像。