84 lines
3.0 KiB
HTML
84 lines
3.0 KiB
HTML
{% comment %}
|
|
用法: {% include "includes/carousel.html" with carousel_id="mainBanner" slides=carousel_data height="500px" show_caption=True %}
|
|
|
|
参数说明:
|
|
- carousel_id: 唯一ID，用于区分页面上的多个轮播图 (必填)
|
|
- slides: 列表，包含字典 {'image_url': '...', 'title': '...', 'description': '...'} (必填)
|
|
- height: 轮播图高度，默认 400px (可选)
|
|
- show_caption: 是否显示文字描述，默认 True (可选)
|
|
- object_fit: 图片填充模式，默认 'cover' (可选: cover, contain, fill)
|
|
{% endcomment %}
|
|
|
|
{% load static %}
|
|
|
|
<div id="{{ carousel_id }}" class="carousel slide" data-ride="carousel">
|
|
|
|
<!-- 1. 指示器 (Indicators) -->
|
|
{% if slides|length > 1 %}
|
|
<ol class="carousel-indicators">
|
|
{% for slide in slides %}
|
|
<li data-target="#{{ carousel_id }}" data-slide-to="{{ forloop.counter0 }}"
|
|
{% if forloop.first %}class="active"{% endif %}></li>
|
|
{% endfor %}
|
|
</ol>
|
|
{% endif %}
|
|
|
|
<!-- 2. 图片区域 (Inner) -->
|
|
<div class="carousel-inner" style="height: {{ height|default:'400px' }}; background: #f8f9fa;">
|
|
{% for slide in slides %}
|
|
<div class="carousel-item {% if forloop.first %}active{% endif %}" style="height: 100%;">
|
|
|
|
<!-- 图片 -->
|
|
<img src="{{ slide.image_url }}"
|
|
class="d-block w-100 h-100"
|
|
alt="{{ slide.title|default:'Slide image' }}"
|
|
style="object-fit: {{ object_fit|default:'cover' }}; width: 100%; height: 100%;">
|
|
|
|
<!-- 文字描述 (可选) -->
|
|
{% if show_caption|default:True and slide.title %}
|
|
<div class="carousel-caption d-none d-md-block"
|
|
style="background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px 20px; bottom: 20px;">
|
|
<h5 class="text-white text-shadow">{{ slide.title }}</h5>
|
|
{% if slide.description %}
|
|
<p class="text-white text-shadow">{{ slide.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
{% empty %}
|
|
<!-- 空状态占位 -->
|
|
<div class="carousel-item active" style="height: 100%; display: flex; align-items: center; justify-content: center; color: #999;">
|
|
<span>暂无轮播图片</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- 3. 控制按钮 (Controls) - 仅当多于1张图时显示 -->
|
|
{% if slides|length > 1 %}
|
|
<button class="carousel-control-prev" type="button" data-target="#{{ carousel_id }}" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-target="#{{ carousel_id }}" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</button>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<style>
|
|
/* 可选：增加文字阴影以确保在亮色图片上可见 */
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
|
}
|
|
/* 修复 Bootstrap 默认 carousel-item 高度问题 */
|
|
.carousel-inner {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.carousel-item {
|
|
height: 100%;
|
|
}
|
|
</style> |