From b4646077938287c89fd38a2efaf6732f58c8e242 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Thu, 8 Sep 2022 22:11:00 +0200
Subject: [PATCH] Fixed image carousel on part info page and added indicators.

---
 templates/Parts/info/_picture.html.twig | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/templates/Parts/info/_picture.html.twig b/templates/Parts/info/_picture.html.twig
index 590e3b89..532d0f8f 100644
--- a/templates/Parts/info/_picture.html.twig
+++ b/templates/Parts/info/_picture.html.twig
@@ -1,7 +1,12 @@
 {% if not pictures is empty %}
     {#  <img src="{{ part.masterPictureAttachment | entityURL('file_view') }}" class="img-fluid img-thumbnail bg-light" alt="Part main image" height="300" width="300"> #}
 
-    <div id="pictureCarousel" class="carousel slide mb-2" data-interval="false">
+    <div id="pictureCarousel" class="carousel slide mb-2" data-bs-interval="false" data-bs-ride="false">
+        <div class="carousel-indicators">
+            {% for pic in pictures %}
+                <button type="button" data-bs-target="#pictureCarousel" data-bs-slide-to="{{ loop.index0 }}" {% if loop.first %}class="active" aria-current="true"{% endif %} aria-label="{{ pic.name }}"></button>
+            {% endfor %}
+        </div>
         <div class="carousel-inner">
             {% for pic in pictures %}
                 {# @var pic App\Entity\Attachments\Attachment #}
@@ -21,14 +26,14 @@
             {% endfor %}
         </div>
         {% if pictures | length > 1 %}
-            <a class="carousel-control-prev carousel-control" href="#pictureCarousel" role="button" data-slide="prev">
+            <button type="button" class="carousel-control-prev" data-bs-target="#pictureCarousel" role="button" data-bs-slide="prev">
                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                 <span class="visually-hidden">{% trans %}part.info.prev_picture{% endtrans %}</span>
-            </a>
-            <a class="carousel-control-next carousel-control" href="#pictureCarousel" role="button" data-slide="next">
+            </button>
+            <button type="button" class="carousel-control-next" data-bs-target="#pictureCarousel" role="button" data-bs-slide="next">
                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
                 <span class="visually-hidden">{% trans %}part.info.next_picture{% endtrans %}</span>
-            </a>
+            </button>
         {% endif %}
     </div>