<div id="carouselExampleIndicators" class="carousel carousel-dark slide fondo-slider" data-bs-ride="carousel">
<ken-burns-carousel
animation-names="ken-burns-center"
images="https://previews.123rf.com/images/scheriton/scheriton1111/scheriton111100011/11275347-noche-bastante-azul-cielo-con-estrellas-y-luces-de-fondo.jpg">
</ken-burns-carousel>
<ol class="carousel-indicators">
{% for key, slider in Sliders %}
<li data-bs-target="#carouselExampleIndicators" style="filter:invert(100%)" data-bs-slide-to="{{ key }}" class="{{ key == 0 ? 'active' : ''}}"></li>
{% endfor %}
</ol>
{% set sliders_length = Sliders | length %}
<div class="carousel-inner d-flex felx-column p-20" style="z-index: 1000;">
<div class="row">
<div class="col-12 col-md-6 d-flex flex-column justify-content-center padding-md-left">
<h1 class="titulo-slider mb-10">{{ 'slider.view.title'| trans({}, 'slider') }}</h1>
<p class="text-slider mb-10">{{ 'slider.view.text'| trans({}, 'slider') }}</p>
<div class="enviar-cartas-container me-lg-1 menu-item text-center">
{% set locale = app.request.locale %}
<a class="enviar-cartas-link justify-content-center menu-link py-3 text-center text-uppercase" href="/{{locale}}/carrito/crear">
<span class="text-center">{{ 'inicio.menu.submit_cards'| trans({}, 'inicio') }}</span>
</a>
</div>
</div>
{% if sliders_length > 0 %}
{% for key, slider in Sliders %}
<div class="col-md-4 col-12 d-flex flex-column {{ key == 0 ? 'active' : ''}}">
{% if slider.SliUrl != "" %}
<a class="" href="{{ slider.SliUrl }}">
{% endif %}
<img class="slider-imagen" style="object-fit: contain;" src='{{ vich_uploader_asset(slider, 'SliImageFile') }}' alt="">
{% if slider.SliUrl != "" %}
</a>
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<br/>