Issue #3485674 by grimreaper, pdureau: [5.1.0] Fix components

Closes #3485674

components/carousel/carousel.twig

@@ -19,37 +19,39 @@
 {% set carousel_id = carousel_id|default("carousel-" ~ random()) %}
 {% set slides = slides is sequence ? slides : [slides] %}
 
-<div{{ attributes.addClass('carousel').addClass('slide').setAttribute('id', carousel_id) }}>
+{% if slides %}
+  <div{{ attributes.addClass('carousel').addClass('slide').setAttribute('id', carousel_id) }}>
 
-  {% if with_indicators %}
-  <div class="carousel-indicators">
-    {% for slide in slides %}
-    <button type="button"
-            data-bs-target="#{{ carousel_id }}"
-            data-bs-slide-to="{{ loop.index0 }}"
-            aria-label="{{ 'Slide @slide_number'|t({'@slide_number': loop.index}) }}"
-      {% if loop.first %}
-      class="active"
-      aria-current="true"
-      {% endif %}>
-    </button>
-    {% endfor %}
-  </div>
-  {% endif %}
+    {% if with_indicators %}
+    <div class="carousel-indicators">
+      {% for i in range(1, slides|length) %}
+      <button type="button"
+              data-bs-target="#{{ carousel_id }}"
+              data-bs-slide-to="{{ loop.index0 }}"
+              aria-label="{{ 'Slide @slide_number'|t({'@slide_number': i}) }}"
+        {% if loop.first %}
+        class="active"
+        aria-current="true"
+        {% endif %}>
+      </button>
+      {% endfor %}
+    </div>
+    {% endif %}
 
-  <div class="carousel-inner">
-    {{ slides }}
-  </div>
+    <div class="carousel-inner">
+      {{ slides }}
+    </div>
 
-  {% if with_controls %}
-  <button class="carousel-control-prev" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="prev">
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">{{ 'Previous'|t }}</span>
-  </button>
-  <button class="carousel-control-next" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="next">
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">{{ 'Next'|t }}</span>
-  </button>
-  {% endif %}
+    {% if with_controls %}
+    <button class="carousel-control-prev" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">{{ 'Previous'|t }}</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">{{ 'Next'|t }}</span>
+    </button>
+    {% endif %}
 
-</div>
+  </div>
+{% endif %}