hero-image-gallery

// src/components/patterns/hero-image-gallery/hero-image-gallery.twig

{{ attach_library("circle_dot/pattern-hero-image-gallery") }}

{% set gallery_items_id = "hero-image-gallery-items-" ~ random() %}
{% set gallery_title_id = "hero-image-gallery-title-" ~ random() %}

<image-gallery aria-roledescription="karussell" aria-labelledby="{{ gallery_title_id }}" class="HeroImageGallery js-ImageGallery">
	<span id="{{ gallery_title_id }}" class="u-hiddenVisually">Bildergalerie</span>
	<div class="HeroImageGallery-metaWithControls">
		<div class="HeroImageGallery-controls js-ImageGallery-controls">
			{% include "@elements/button/button.twig" with {
				additional_attributes: [
					["data-previous", ""],
					["aria-controls", gallery_items_id],
				],
				label: "Vorheriges Bild",
				icon_only: true,
				icon: "arrow-left",
				size: "small",
			} only %}
			{% include "@elements/button/button.twig" with {
				additional_attributes: [
					["data-next", ""],
					["aria-controls", gallery_items_id],
				],
				label: "Nächstes Bild",
				icon_only: true,
				icon: "arrow-right",
				size: "small",
			} only %}
		</div>
		<div class="HeroImageGallery-meta">
			<span class="HeroImageGallery-metaCounter">
				<span class="HeroImageGallery-metaCounterCurrent js-HeroImageGallery-metaCounterCurrent">1</span> / <span class="js-HeroImageGallery-metaCounterTotal">{{ media_items|length }}</span>
			</span>
		</div>
	</div>
	<ul aria-live="polite" id="{{ gallery_items_id }}" class="HeroImageGallery-items">
		{% for media_item in media_items %}
			<li aria-roledescription="galeriebild" aria-label="{{ loop.index }} von {{ loop.length }}" class="HeroImageGallery-item js-HeroImageGallery-item">
				{{ media_item }}
			</li>
		{% endfor %}
	</ul>
</image-gallery>