mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-24 18:58:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed image carousel on part info page and added indicators.

Browse source
This commit is contained in:
Jan Böhmer 2022-09-08 22:11:00 +02:00
parent 3b48fc813f
commit b464607793
1 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

15
templates/Parts/info/_picture.html.twig
View file

@ -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>