<div class="o-slider glide js-slider-init slider--picture-gallery" data-slider-type="picture-gallery" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Bildergalerie mit Hoch- und Querformat</h2>
<div class="slider__detailtext">
<p>Ein optionaler Text</p>
<p>Eine neue Zeile.</p>
</div>
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
<ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 11 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg">
<img src="../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="560" height="840">
</picture>
<figcaption class="figure__figcaption ">
<p>Optional Bildunterschrift - Bild 1</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
<source media="(min-width: 641px)" srcset="../../images/3x2/mr-right.jpg">
<img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="960" height="640">
</picture>
<figcaption class="figure__figcaption ">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg">
<img src="../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="560" height="896">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg">
<source media="(min-width: 641px)" srcset="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1650">
</picture>
<figcaption class="figure__figcaption ">
<p>Bild 3</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-slider glide js-slider-init {{viewtypes.specifier}}" data-slider-type="{{viewtypes.sliderType}}" data-glide-config="{"autoplay": {{content.config.autoplay}} }" {{#if content.ratio}}data-content-ratio="{{content.ratio}}"{{/if}} {{#if switches.hasDataAttributes}}{{{content.dataAttributes}}}{{/if}}>
{{# switches.hasHeadline }}
<h2 class="slider__headline {{viewtypes.headline}}">{{content.title}}</h2>
{{/ switches.hasHeadline }}
{{# switches.hasDetailText }}
<div class="slider__detailtext">
{{# switches.hasSubtitle }}
<p>{{content.subtitle}}</p>
{{/ switches.hasSubtitle }}
<p>{{content.detailText}}</p>
</div>
{{/ switches.hasDetailText }}
<div class="slider__area">
<div class="slider__track-wrapper">
{{# switches.hasArrowsTop}}
{{#if viewtypes.arrowsType }}
{{render (stringToPartial viewtypes.arrowsType) partials.arrows merge=true}}
{{else}}
{{log 'slider.hbs: ERROR: Missing viewtypes.arrowsType value' level='error'}}
{{/if}}
{{/switches.hasArrowsTop}}
<div class="slider__track glide__track slider__track--{{viewtypes.sliderType}}" data-glide-el="track">
<ul class="glide__slides slider__slides--{{viewtypes.sliderType}}" aria-label="Karusell mit {{switches.slideCount}} {{content.elementName}}">
{{#each partials.slide }}
{{#ifcond @index '<' ../switches.slideCount}}
<li class="glide__slide slider__slide--{{../viewtypes.sliderType}}">
{{ render (stringToPartial ../partials.includedItemType) this merge=true }}
</li>
{{/ifcond}}
{{/each}}
</ul>
</div>
{{# switches.hasArrowsBottom}}
{{#if viewtypes.arrowsType }}
{{render (stringToPartial viewtypes.arrowsType) partials.arrows merge=true}}
{{else}}
{{log 'slider.hbs: ERROR: Missing viewtypes.arrowsType value' level='error'}}
{{/if}}
{{/switches.hasArrowsBottom}}
</div>
{{# switches.hasArrowsWithBullets}}
{{#if viewtypes.arrowsType }}
<div class="slider__controls-area">
{{ render (stringToPartial viewtypes.arrowsType) partials.arrows merge=true }}
{{else}}
{{ log 'slider.hbs: ERROR: Missing viewtypes.arrowsType value' level='error' }}
{{/if}}
{{/switches.hasArrowsWithBullets}}
{{# switches.hasBullets }}
{{#if viewtypes.bulletsType }}
{{render (stringToPartial viewtypes.bulletsType) partials.bullets merge=true}}
{{else}}
{{log 'slider.hbs: ERROR: Missing viewtypes.bulletsType value' level='error'}}
{{/if}}
{{/ switches.hasBullets }}
{{# switches.hasArrowsWithBullets}}
{{#if viewtypes.arrowsType }}
</div> {{! close Controls Area div if rendered }}
{{/if}}
{{/switches.hasArrowsWithBullets}}
</div>
{{# switches.hasExternalContent}}
{{render '@formelement-toggle--third-party-consent-manager' partials.consentToggle merge=true}}
{{/ switches.hasExternalContent}}
</div>
{
"switches": {
"hasHeadline": true,
"hasDetailText": true,
"hasArrowsBottom": false,
"hasBullets": false,
"slideCount": 11,
"hasExternalContent": false,
"hasSubtitle": true,
"hasArrowsTop": true
},
"viewtypes": {
"specifier": "slider--picture-gallery",
"sliderType": "picture-gallery",
"arrowsType": "slider-arrows--chevron-pair",
"bulletsType": "slider-bullets--disc",
"headline": "slider__headline--h2"
},
"content": {
"title": "Bildergalerie mit Hoch- und Querformat",
"detailText": "Eine neue Zeile.",
"config": "",
"elementName": "Bilder",
"ratio": false,
"subtitle": "Ein optionaler Text"
},
"partials": {
"includedItemType": "figure",
"slide": [
{
"switches": {
"hasFigcaption": true
},
"content": {
"captionText": "<p>Optional Bildunterschrift - Bild 1</p>"
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg"
}
],
"img": {
"src": "../../images/2x3/junge-schwangere-frau-mit-tablet-auf-einer-couch.jpg",
"alt": "Dies ist ein alternativ Text",
"width": "560",
"height": "840"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true
},
"content": {
"captionText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/3x2/mr-right.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/3x2/mr-right.jpg"
}
],
"img": {
"src": "../../images/3x2/mr-right.jpg",
"alt": "Dies ist ein alternativ Text",
"width": "960",
"height": "640"
}
}
}
}
},
{
"switches": {
"hasFigcaption": false
},
"content": {
"captionText": "<p>Bild 2</p>"
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg"
}
],
"img": {
"src": "../../images/2x3/ein-mann-tippt-auf-sein-handy-und-lacht-dabei.jpg",
"alt": "Dies ist ein alternativ Text",
"width": "560",
"height": "896"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true
},
"content": {
"captionText": "<p>Bild 3</p>"
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg"
}
],
"img": {
"src": "../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg",
"alt": "Dies ist ein alternativ Text",
"width": "1100",
"height": "1650"
}
}
}
}
}
],
"arrows": {
"switches": {
"hasAriaAttr": true
},
"viewtypes": {},
"content": {
"ariaAttr": "aria-hidden=\"true\""
},
"partials": {}
}
}
}
No notes defined.