{% assign carousel = page.carousels[include.id] %}

<div class="card">
    <div id="guideCarousel-{{ include.id }}" class="carousel slide card-body">
        <h2 class="card-title">{{ carousel.title }}</h2>
        <div class="carousel-indicators">
            {% for step in carousel.steps %}
            <button type="button" data-bs-target="guideCarousel-{{ include.id }}" data-bs-slide-to="{{ forloop.index0 }}"
                    {% if forloop.index0 == 0 %}
                    class="active" aria-current="true"
                    {% endif %}
                    aria-label="Slide {{i}}">
            </button>
            {% endfor %}
        </div>
        <div class="carousel-inner" style="overflow: visible;">
            {% for step in carousel.steps %}
            <div class="carousel-item{% if forloop.index0 == 0 %} active{% endif %}">
                <img src="{{ step.image }}" class="d-block w-100" alt="{{ step.image-alt }}">
                <div class="carousel-caption d-none d-md-block text-body-emphasis"
                     style="background: rgba(75, 75, 75, .7);">
                    <h5>Step {{ forloop.index }}</h5>
                    <p>{{ step.text }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#guideCarousel-{{ include.id }}" 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="#guideCarousel-{{ include.id }}" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

    </div>
</div>