I want to add a slider for every book that has the page hero banner. But the bootstrap slider needs th 'active' class to work.

<div class="carousel-inner">
    {% for libro in site.libros %}
        {% if libro.heroLibro %}
            {% if forloop.index == 1 %}
                <div class="carousel-item active">
                <img src="{{ site.baseurl }}/assets/img/libros/hero/{{ libro.heroLibro }}" alt=""
                    class="img-fluid rounded shadow border-light w-100">
                </div>
            {% else %}
                <div class="carousel-item">
                    <img src="{{ site.baseurl }}/assets/img/libros/hero/{{ libro.heroLibro }}" alt=""
                        class="img-fluid rounded shadow border-light w-100">
                </div>
            {% endif %}
        {% endif %}
    {% endfor %}
</div>

This i what i´ve got. I've tried

{% if forloop.first === true  %}
{% if forloop.index == 1 %}

But nothing works. What I'm doing wrong?