hr-design-system-handlebars 1.114.70 → 1.114.71

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -39,6 +39,7 @@
 	"figures_copyright": "Bild © ",
 	"figures_copyright_voting": "Bild © {0}",
 	"gallery_image_copyright": "Bild © {0}",
+	"gallery_image_number": "Bild",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",
 	"geotag_metatitle_prefix": "aktuelle Nachrichten und Informationen ",
@@ -191,6 +192,8 @@
 	"story_video_livestream_intro_sr": "Livestream",
 	"story_video_livestream_outro_sr": "Ende des Livestreams",
 	"teaser_more_audio": "zur Audio-Einzelseite",
+	"story_gallery_intro_sr": "Bildergalerie",
+	"story_gallery_outro_sr": "Ende der Bildergalerie",
 	"teaser_more_audio_sr": "zum Audio",
 	"teaser_more_audio_brand": "zur {0} Audio-Einzelseite",
 	"teaser_more_audio_brand_sr": "zum {0} Audio",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -39,6 +39,7 @@
 	"figures_copyright": "Bild © ",
 	"figures_copyright_voting": "Bild © {0}",
 	"gallery_image_copyright": "Bild © {0}",
+	"gallery_image_number": "Bild",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",
 	"geotag_metatitle_prefix": "aktuelle Nachrichten und Informationen ",
@@ -191,6 +192,8 @@
 	"story_video_livestream_intro_sr": "Livestream",
 	"story_video_livestream_outro_sr": "Ende des Livestreams",
 	"teaser_more_audio": "zur Audio-Einzelseite",
+	"story_gallery_intro_sr": "Bildergalerie",
+	"story_gallery_outro_sr": "Ende der Bildergalerie",
 	"teaser_more_audio_sr": "zum Audio",
 	"teaser_more_audio_brand": "zur {0} Audio-Einzelseite",
 	"teaser_more_audio_brand_sr": "zum {0} Audio",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -39,6 +39,7 @@
 	"figures_copyright": "Bild © ",
 	"figures_copyright_voting": "Bild © {0}",
 	"gallery_image_copyright": "Bild © {0}",
+	"gallery_image_number": "Bild",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",
 	"geotag_metatitle_prefix": "aktuelle Nachrichten und Informationen ",
@@ -177,8 +178,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
@@ -191,6 +192,8 @@
 	"story_video_livestream_intro_sr": "Livestream",
 	"story_video_livestream_outro_sr": "Ende des Livestreams",
 	"teaser_more_audio": "zur Audio-Einzelseite",
+	"story_gallery_intro_sr": "Bildergalerie",
+	"story_gallery_outro_sr": "Ende der Bildergalerie",
 	"teaser_more_audio_sr": "zum Audio",
 	"teaser_more_audio_brand": "zur {0} Audio-Einzelseite",
 	"teaser_more_audio_brand_sr": "zum {0} Audio",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -39,6 +39,7 @@
 	"figures_copyright": "Bild © ",
 	"figures_copyright_voting": "Bild © {0}",
 	"gallery_image_copyright": "Bild © {0}",
+	"gallery_image_number": "Bild",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",
 	"geotag_metatitle_prefix": "aktuelle Nachrichten und Informationen ",
@@ -177,8 +178,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
@@ -191,6 +192,8 @@
 	"story_video_livestream_intro_sr": "Livestream",
 	"story_video_livestream_outro_sr": "Ende des Livestreams",
 	"teaser_more_audio": "zur Audio-Einzelseite",
+	"story_gallery_intro_sr": "Bildergalerie",
+	"story_gallery_outro_sr": "Ende der Bildergalerie",
 	"teaser_more_audio_sr": "zum Audio",
 	"teaser_more_audio_brand": "zur {0} Audio-Einzelseite",
 	"teaser_more_audio_brand_sr": "zum {0} Audio",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -39,6 +39,7 @@
 	"figures_copyright": "Bild © ",
 	"figures_copyright_voting": "Bild © {0}",
 	"gallery_image_copyright": "Bild © {0}",
+	"gallery_image_number": "Bild",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",
 	"geotag_metatitle_prefix": "aktuelle Nachrichten und Informationen ",
@@ -191,6 +192,8 @@
 	"story_video_livestream_intro_sr": "Livestream",
 	"story_video_livestream_outro_sr": "Ende des Livestreams",
 	"teaser_more_audio": "zur Audio-Einzelseite",
+	"story_gallery_intro_sr": "Bildergalerie",
+	"story_gallery_outro_sr": "Ende der Bildergalerie",
 	"teaser_more_audio_sr": "zum Audio",
 	"teaser_more_audio_brand": "zur {0} Audio-Einzelseite",
 	"teaser_more_audio_brand_sr": "zum {0} Audio",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -39,6 +39,7 @@
 	"figures_copyright": "Bild © ",
 	"figures_copyright_voting": "Bild © {0}",
 	"gallery_image_copyright": "Bild © {0}",
+	"gallery_image_number": "Bild",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",
 	"geotag_metatitle_prefix": "aktuelle Nachrichten und Informationen ",
@@ -191,6 +192,8 @@
 	"story_video_livestream_intro_sr": "Livestream",
 	"story_video_livestream_outro_sr": "Ende des Livestreams",
 	"teaser_more_audio": "zur Audio-Einzelseite",
+	"story_gallery_intro_sr": "Bildergalerie",
+	"story_gallery_outro_sr": "Ende der Bildergalerie",
 	"teaser_more_audio_sr": "zum Audio",
 	"teaser_more_audio_brand": "zur {0} Audio-Einzelseite",
 	"teaser_more_audio_brand_sr": "zum {0} Audio",

package/src/assets/fixtures/content/copytext/copytext_gallery.json

@@ -0,0 +1,142 @@
+{
+    "copytextParagraph": [
+        {
+            "isHeadline": true,
+            "text": "Copytext mit Bildergalerie"
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "paragraphBoxItem": {
+                "isGallery": true,
+                "toModel": {
+                    "galleryPage":{
+                        "isGallery": true,
+                        "label": {
+                            "type": "gallery",
+                            "loca": "label_gallery",
+                            "byline": {
+                            "bylineText": "5 Bilder"
+                            }
+                        },
+                        "toModel": {
+                            "mediaBacklinkToStoryTeaser": {
+                                "link": {
+                                    "url": "/galleryseite",
+                                    "isTargetBlank": false
+                                },
+                                "readMoreScreenreader": "zur hr3.de Bildergalerie",
+                                "title": "Bildergalerie title",
+                                "isForeignBrand": true,
+                                "readMore": "zur hr3.de Bildergalerie-Einzelseite",
+                                "hasIcon": true,
+                                "iconName": "extern"
+                            }
+                        },
+                        "gallery":{
+                            "items":[
+                                {
+                                    "@->jsoninclude": "page/story/story_images.inc.json",
+                                    "@->contentpath": "copytext_gallery",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "jugendfeuerwehr-102"
+                                        }    
+                                    ],
+                                    "@->overrides": [
+                                        {
+                                            "@->contentpath": "caption",
+                                            "@->value": "Jugendfeuerwehr"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "@->jsoninclude": "page/story/story_images.inc.json",
+                                    "@->contentpath": "copytext_gallery",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "buchmesse-fahnen-102"
+                                        }
+                                    ],
+                                    "@->overrides": [
+                                        {
+                                            "@->contentpath": "caption",
+                                            "@->value": "buchmesse"
+                                        },
+                                        {
+                                            "@->contentpath": "number",
+                                            "@->value": "2"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "@->jsoninclude": "page/story/story_images.inc.json",
+                                    "@->contentpath": "copytext_gallery",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "connichi-106"
+                                        }
+                                    ],
+                                    "@->overrides": [
+                                        {
+                                            "@->contentpath": "caption",
+                                            "@->value": "connichi"
+                                        },
+                                        {
+                                            "@->contentpath": "number",
+                                            "@->value": "3"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "@->jsoninclude": "page/story/story_images.inc.json",
+                                    "@->contentpath": "copytext_gallery",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "emmanuel-tjeknavorian-108"
+                                        }
+                                    ],
+                                    "@->overrides": [
+                                        {
+                                            "@->contentpath": "caption",
+                                            "@->value": "emmanuel-tjeknavorian"
+                                        },
+                                        {
+                                            "@->contentpath": "number",
+                                            "@->value": "4"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "@->jsoninclude": "page/story/story_images.inc.json",
+                                    "@->contentpath": "copytext_gallery",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "greenteams-grafik-100"
+                                        }
+                                    ],
+                                    "@->overrides": [
+                                        {
+                                            "@->contentpath": "caption",
+                                            "@->value": "greenteams-grafik"
+                                        },
+                                        {
+                                            "@->contentpath": "number",
+                                            "@->value": "5"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                }
+            }
+        }
+    ]
+}

package/src/assets/fixtures/content/copytext/copytext_gallery_portrait.json

@@ -0,0 +1,102 @@
+{
+    "copytextParagraph": [
+        {
+            "isHeadline": true,
+            "text": "Copytext mit Bildergalerie-Hochkantbildern"
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "paragraphBoxItem": {
+                "isGallery": true,
+                "toModel": {
+                    "galleryPage":{
+                        "isGallery": true,
+                        "label": {
+                            "type": "gallery",
+                            "loca": "label_gallery",
+                            "byline": {
+                            "bylineText": "3 Bilder"
+                            }
+                        },
+                        "toModel": {
+                            "mediaBacklinkToStoryTeaser": {
+                                "link": {
+                                    "url": "/galleryseite",
+                                    "isTargetBlank": false
+                                },
+                                "readMoreScreenreader": "zur hr3.de Bildergalerie",
+                                "title": "Bildergalerie title",
+                                "isForeignBrand": true,
+                                "readMore": "zur hr3.de Bildergalerie-Einzelseite",
+                                "hasIcon": true,
+                                "iconName": "extern"
+                            }
+                        },
+                        "gallery":{
+                            "items":[
+                                {
+                                    "@->jsoninclude": "page/story/story_images.inc.json",
+                                    "@->contentpath": "copytext_gallery_portrait",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "decke-uni-marburg-104"
+                                        }    
+                                    ],
+                                    "@->overrides": [
+                                        {
+                                            "@->contentpath": "caption",
+                                            "@->value": "decke uni marburg 1"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "@->jsoninclude": "page/story/story_images.inc.json",
+                                    "@->contentpath": "copytext_gallery_portrait",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "decke-uni-marburg-102"
+                                        }
+                                    ],
+                                    "@->overrides": [
+                                        {
+                                            "@->contentpath": "caption",
+                                            "@->value": "decke uni marburg 2"
+                                        },
+                                        {
+                                            "@->contentpath": "number",
+                                            "@->value": "2"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "@->jsoninclude": "page/story/story_images.inc.json",
+                                    "@->contentpath": "copytext_gallery_portrait",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "dach-uni-marburg-101"
+                                        }
+                                    ],
+                                    "@->overrides": [
+                                        {
+                                            "@->contentpath": "caption",
+                                            "@->value": "decke uni marburg 3"
+                                        },
+                                        {
+                                            "@->contentpath": "number",
+                                            "@->value": "3"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                }
+            }
+        }
+    ]
+}

package/src/assets/fixtures/page/story/story_images.inc.json

@@ -99,5 +99,58 @@
                 }
             ]
         }
-    }    
+    },
+    "copytext_gallery": {
+        "isImage": true,
+        "showFullSize": {
+            "isTrue": true
+        },
+        "displayOriginal": {
+            "isTrue": false
+        },
+        "number": "1",
+        "totalNumber": "5",
+        "title":"title",
+        "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
+        "copyrightWithLinks": "Karsten Hufer",
+        "imageJson": "Beispiel JSON",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                }
+            ]
+        }
+    },
+    "copytext_gallery_portrait": {
+        "isImage": true,
+        "showFullSize": {
+            "isTrue": true
+        },
+        "displayOriginal": {
+            "isTrue": true
+        },
+        "number": "1",
+        "totalNumber": "5",
+        "title":"title",
+        "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
+        "copyrightWithLinks": "Karsten Hufer",
+        "imageJson": "Beispiel JSON",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-Xto9__small.jpg 135w, images/{#image}_v-Xto9__medium.jpg 203w, images/{#image}_v-Xto9.jpg 405w, images/{#image}_v-Xto9__retina.jpg 810w"
+                }
+            ]
+        }
+    }
+
 }

package/src/assets/js/alpine.js

@@ -22,6 +22,7 @@ AsyncAlpine.init(Alpine)
     .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
     .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
     .data('newsletterForm', ()=> import('components/newsletter/js/newsletterForm.alpine.js'))
+    .data('gallerySlider', () => import('components/content/copytext/components/gallery/js/gallerySlider.alpine.js'))
     .start()
 
 window.Alpine = Alpine

package/src/assets/tailwind.css

@@ -116,6 +116,8 @@
     /* Button */
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.science.hex');
+    --color-button-transparent: rgba(255, 255, 255, 0.80);
+    --color-button-transparent--dark: rgba(255, 255, 255, 0.55);
     /* Media-Button */
     --color-media-button: theme('colors.blue.jellyBean.hex');
     /* Media-Button Live */

package/src/stories/views/components/button/utilities/button_variation_classes.hbs

@@ -1,8 +1,8 @@
 {{#if _onBackground~}}
      {{inline-switch
         _variant
-        '["primary","secondary","tertiary"]'
-        '[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark  hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark  hover:text-button--dark hover:border-button-inverted--dark  active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
+        '["primary","secondary","tertiary","transparent"]'
+        '[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark  hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark  hover:text-button--dark hover:border-button-inverted--dark  active:text-button active:bg-button-inverted--dark " ,"  primary border-transparent text-button--dark bg-button-transparent  hover:bg-button-transparent--dark hover:border-button-transparent--dark active:bg-button-transparent--dark "," border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
     ~}}
 {{else if _disabled~}}
 

package/src/stories/views/components/content/copytext/components/gallery/gallery.hbs

@@ -0,0 +1,3 @@
+{{#with this.toModel.galleryPage}}
+    {{> components/content/copytext/components/media/media_figure _hasHeadline=true _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if ../_isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_gallery_intro_sr" _a11yOutro-loca="story_gallery_outro_sr"}}
+{{/with}}   

package/src/stories/views/components/content/copytext/components/gallery/galleryitem_copytext.hbs

@@ -0,0 +1,22 @@
+{{~#with this.gallery ~}}
+<div class="relative w-full overflow-hidden" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()"
+    x-data="gallerySlider()"
+    x-init="loadSlider()"
+    ax-load
+    x-ignore
+     >
+    <div class="relative w-full select-none">
+        <div class="absolute top-0 bottom-0 left-0 right-0 ar-16-9">
+            {{#> components/button/button _variant="transparent"  _alpineClick="previous()" _css="absolute z-10 flex items-center justify-center left-4 bottom-4 sm:left-5 sm:bottom-5" _onBackground=true}}
+                    {{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons" _css="w-8 h-8 sm:w-12 sm:h-12 pr-0.5 fill-link dark:fill-link-dark" }}
+            {{/components/button/button}}
+            {{#> components/button/button _variant="transparent"  _alpineClick="next()" _css="absolute z-10 flex items-center justify-center right-4 bottom-4 sm:right-5 sm:bottom-5" _onBackground=true}}
+                {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css="w-8 h-8 sm:w-12 sm:h-12 pr-0.5 fill-link dark:fill-link-dark" }}
+            {{/components/button/button}}
+        </div>
+        {{#each this.items}}
+         {{~> components/content/copytext/components/gallery/galleryitem_figure _mediaBacklinkToStoryTeaser=../../this.toModel.mediaBacklinkToStoryTeaser-adjust_context _cssClassCaption=../../_cssClassCaption ~}}
+        {{/each}}
+    </div>
+</div>
+{{~/with~}}

package/src/stories/views/components/content/copytext/components/gallery/galleryitem_description_copytext.hbs

@@ -0,0 +1,18 @@
+<figcaption class="gallery-slider__caption">
+    {{~#> components/content/copytext/components/image/caption _isFullTextVisible=true  _cssClassCaption=_cssClassCaption~}}
+        <span class="block font-bold">{{loca "gallery_image_number"}} {{this.number}}/{{this.totalNumber}} {{~#with this.title}} <span class="mx-1.5">|</span>{{this}}{{/with~}}</span>
+        {{#if this.caption}} {{~> components/content/copytext/components/image/image_caption_text~}} {{/if}}
+        {{~> components/content/copytext/components/image/image_copyright~}}
+        <span class="mx-1.5">|</span>
+        {{~#with _mediaBacklinkToStoryTeaser-adjust_context~}}
+            {{~#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"~}}
+                <span>
+                    {{~this.readMore~}}
+                    {{~#if this.hasIcon}}
+                        {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
+                    {{~/if~}}
+                </span>
+            {{~/components/base/link~}}
+        {{~/with~}}
+    {{~/components/content/copytext/components/image/caption~}}
+</figcaption>

package/src/stories/views/components/content/copytext/components/gallery/galleryitem_figure.hbs

@@ -0,0 +1,35 @@
+<figure {{#unless @first}} x-cloak {{/unless}}>
+    <div class="relative ar-16-9 gallery-slider__image animate-duration-500 animate-delay-100 animate-once animate-ease-in-out" 
+        :class="animationEnabled ? (slideToRight ? 'animate-fade-left' : 'animate-fade-right') : ''"
+        {{!-- x-transition:enter="transition ease-out duration-700 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100" --}}>
+        {{~#if this.displayOriginal.isTrue ~}}
+            <div class="relative" aria-hidden="true">
+                {{> components/base/image/responsive_image
+                        _type="gallery"
+                        _variant="default"
+                        _addClass="ar-16-9"
+                        _noDelay=(if @first true '')
+                        _isWebview=true}}
+                <div class="absolute top-0 bottom-0 left-0 right-0 w-full bg-white/80 backdrop-blur-md">
+                </div>
+            </div>
+            {{> components/base/image/responsive_image
+                _type="gallery"
+                _variant="portrait"
+                _addClass="absolute top-0 left-0 right-0 bottom-0"
+                _addClassImg="!w-auto h-full absolute left-1/2 -translate-x-1/2"
+                _noDelay=(if @first true '')
+                _isWebview=true}}
+        {{else}}
+            {{> components/base/image/responsive_image  
+                _type="gallery" 
+                _variant="default" 
+                _addClass="ar-16-9"
+                _noDelay=(if @first true '')
+                _isWebview=true}}
+        {{~/if~}}
+    </div>
+    {{~> components/content/copytext/components/gallery/galleryitem_description_copytext _mediaBacklinkToStoryTeaser=_mediaBacklinkToStoryTeaser _cssClassCaption=_cssClassCaption~}}
+</figure>

package/src/stories/views/components/content/copytext/components/gallery/js/gallerySlider.alpine.js

@@ -0,0 +1,49 @@
+export default function gallerySlider() {
+    return { 
+        slides: [],
+        captions: [],
+        currentSlideIndex: 1,
+        animationEnabled: false,
+        slideToRight: true,
+        touchStartX: null,
+        touchEndX: null,
+        swipeThreshold: 50,
+        previous() {
+            this.animationEnabled = true;
+            this.slideToRight = false;    
+            this.currentSlideIndex = (this.currentSlideIndex - 1 > 0) ? this.currentSlideIndex - 1 : this.slides.length;            
+        },            
+        next() {                
+            if (this.slides.length > 0) {
+                this.animationEnabled = true;
+                this.slideToRight = true;
+                this.currentSlideIndex = (this.currentSlideIndex % this.slides.length) + 1;
+            }
+        },
+        loadSlider() {
+            this.slides = [...document.querySelectorAll('.gallery-slider__image')];
+            this.slides.forEach((slide, index) => slide.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+            this.captions = [...document.querySelectorAll('.gallery-slider__caption')];
+            this.captions.forEach((caption, index) => caption.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+        },
+        handleTouchStart(event) {
+            this.touchStartX = event.touches[0].clientX
+        },
+        handleTouchMove(event) {
+            this.touchEndX = event.touches[0].clientX
+        },
+        handleTouchEnd() {
+            if(this.touchEndX){
+                if (this.touchStartX - this.touchEndX > this.swipeThreshold) {
+                    this.next()
+                }
+                if (this.touchStartX - this.touchEndX < -this.swipeThreshold) {
+                    this.previous()
+                }
+                this.touchStartX = null
+                this.touchEndX = null
+            }
+        }
+
+    };
+}