[英]Slider in django website using bootstrap4 carousel
我想在我的 django 網站中創建一個輪播滑塊,在那里我可以輕松地從我的管理面板添加/刪除圖像。
<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">
{% for obj in projects %}
{% if forloop.first %}
<div class="carousel-item active ">
{% else %}
<div class="carousel-item ">
{% endif %}
<img class="d-block w-100 h-50" class="h-50 d-inline-block" src="{{ obj.thumbnail.url}}" alt="{{obj.title}}">
</div>
{% endfor %}
</div>
你的html模板是正常的。 您需要像這樣創建模型:
class Carousel(models.Model):
image = models.ImageField()
在您的 admin.py 中:
...
admin.site.register(Carousel)
鑒於:
...
projects = Carousel.objects.all()
return render(request, 'template.html', {'projects': projects})
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{% for obj in sliderview %}
{% if forloop.first %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.counter0}}" class="active"></li>
{% else %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.counter0}}"></li>
{% endif %}
{% endfor %}
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
{% for obj in sliderview %}
{% if forloop.first %}
<div class="carousel-item active ">
{% else %}
<div class="carousel-item ">
{% endif %}
<img class="d-block w-100 h-50" class="h-50 d-inline-block" src="{{ obj.thumbnail.url}}" alt="{{obj.title}}">
</div>
{% endfor %}
</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>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.