<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 Download</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 13 Bilder">
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<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">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Querformat mit download</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">
</picture>
<figcaption class="figure__figcaption ">
<p>Querformat ohne download. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<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">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</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">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture ">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1605">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1605">
</picture>
<figcaption class="figure__figcaption ">
<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Originalbild, Hochformat mit Download. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
</picture>
<figcaption class="figure__figcaption ">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture ">
<img src="../../images/1x1/abstimmung-des-verwaltungsrats.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<figcaption class="figure__figcaption ">
<p>1x1 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</figcaption>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure ">
<picture class="a-picture picture--original picture--landscape">
<img src="../../images/dummy_200_100.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="200" height="100">
</picture>
</figure>
</li>
<li class="glide__slide slider__slide--picture-gallery">
<figure class="m-figure m-figure--has-download">
<picture class="a-picture picture--original picture--portrait">
<img src="../../images/dummy_100_1000.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
</picture>
<div class="figure__download">
<a class="a-btn btn--download" href="#" title="" download="Download Titel">
<span class="sr-only">Download: SR Download Title</span>
JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
</a>
</div>
<figcaption class="figure__figcaption " aria-hidden="true">
<p>Langes Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</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": 13,
"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 Download",
"detailText": "Eine neue Zeile.",
"config": "",
"elementName": "Bilder",
"ratio": false,
"subtitle": "Ein optionaler Text"
},
"partials": {
"includedItemType": "figure--has-download",
"slide": [
{
"switches": {
"hasFigcaption": true
},
"content": {
"captionText": "<p>Querformat mit download</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"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true,
"hasDownload": false
},
"viewtypes": {
"specifier": ""
},
"content": {
"captionText": "<p>Querformat ohne download. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</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"
}
}
}
}
},
{
"switches": {
"hasFigcaption": false
},
"content": {
"captionText": "<p>Querformat ohne Caption</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"
}
}
}
}
},
{
"switches": {
"hasFigcaption": false,
"hasDownload": false
},
"viewtypes": {
"specifier": ""
},
"content": {
"captionText": "<p>Querformat ohne download und caption</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"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true
},
"content": {
"captionText": "<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
},
"partials": {
"picture": {
"content": {
"sources": [],
"img": {
"src": "../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg",
"alt": "Dies ist ein alternativ Text",
"width": "1100",
"height": "1605"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true,
"hasDownload": false
},
"viewtypes": {
"specifier": ""
},
"content": {
"captionText": "<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
},
"partials": {
"picture": {
"content": {
"sources": [],
"img": {
"src": "../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg",
"alt": "Dies ist ein alternativ Text",
"width": "1100",
"height": "1605"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true
},
"content": {
"captionText": "<p>Originalbild, Hochformat mit Download. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>"
},
"partials": {
"picture": {
"viewtypes": {
"specifier": "picture--original picture--portrait"
},
"content": {
"sources": [],
"img": {
"src": "../../images/starke-regionale-unterschiede-data.jpeg",
"alt": "Dies ist ein alternativ Text",
"width": "1293",
"height": "1844"
}
}
}
}
},
{
"switches": {
"hasFigcaption": false
},
"partials": {
"picture": {
"viewtypes": {
"specifier": "picture--original picture--portrait"
},
"content": {
"sources": [],
"img": {
"src": "../../images/starke-regionale-unterschiede-data.jpeg",
"alt": "Dies ist ein alternativ Text",
"width": "1293",
"height": "1844"
}
}
}
}
},
{
"switches": {
"hasFigcaption": false
},
"partials": {
"picture": {
"viewtypes": {
"specifier": "picture--original picture--landscape"
},
"content": {
"sources": [],
"img": {
"src": "../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg",
"alt": "Dies ist ein alternativ Text",
"width": "1509",
"height": "1059"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true,
"hasDownload": false
},
"viewtypes": {
"specifier": ""
},
"content": {
"captionText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>"
},
"partials": {
"picture": {
"viewtypes": {
"specifier": "picture--original picture--landscape"
},
"content": {
"sources": [],
"img": {
"src": "../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg",
"alt": "Dies ist ein alternativ Text",
"width": "1509",
"height": "1059"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true,
"hasDownload": false
},
"viewtypes": {
"specifier": ""
},
"content": {
"captionText": "<p>1x1 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
},
"partials": {
"picture": {
"content": {
"sources": [],
"img": {
"src": "../../images/1x1/abstimmung-des-verwaltungsrats.jpg",
"alt": "Dies ist ein alternativ Text",
"width": "100",
"height": "1000"
}
}
}
}
},
{
"switches": {
"hasFigcaption": false,
"hasDownload": false
},
"viewtypes": {
"specifier": ""
},
"content": {
"captionText": "<p>Mini Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
},
"partials": {
"picture": {
"viewtypes": {
"specifier": "picture--original picture--landscape"
},
"content": {
"sources": [],
"img": {
"src": "../../images/dummy_200_100.data.png",
"alt": "Dies ist ein alternativ Text",
"width": "200",
"height": "100"
}
}
}
}
},
{
"switches": {
"hasFigcaption": true
},
"content": {
"captionText": "<p>Langes Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
},
"partials": {
"picture": {
"viewtypes": {
"specifier": "picture--original picture--portrait"
},
"content": {
"sources": [],
"img": {
"src": "../../images/dummy_100_1000.data.png",
"alt": "Dies ist ein alternativ Text",
"width": "100",
"height": "1000"
}
}
}
}
}
],
"arrows": {
"switches": {
"hasAriaAttr": true
},
"viewtypes": {},
"content": {
"ariaAttr": "aria-hidden=\"true\""
},
"partials": {}
}
}
}
No notes defined.