{% if carouselArticles.articles is defined and carouselArticles|length > 0 %} <section class="pt-5 pb-5"> <div class=""> <div class="row"> <div class="col-6"> <h3>{{ carouselArticles.name|capitalize }} </h3> <div class="underline"></div> </div> {% if carouselArticles.articles | length > 3 %} <div class="col-6 text-right"> <a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev"> <i class="fa fa-arrow-left"></i> </a> <a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next"> <i class="fa fa-arrow-right"></i> </a> </div> {% endif %} <div class="col-12"> <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> {% for article in carouselArticles.articles %} {% if loop.index % 3 == 1 %} <div class="carousel-item {% if loop.index == 1 %} active {% endif %}"> <div class="row"> {% endif %} <div class="col-md-4 mb-3"> {% include 'article/articleCard.html.twig' %} </div> {% if loop.index % 3 == 0 %} </div> </div> {% endif %} {% endfor %} </div> </div> </div> </div> </div> </section>{% endif %}