<div class="o-slider glide js-slider-init slider--icon-image" data-slider-type="icon-image" data-glide-config="{"autoplay": }">
<h2 class="slider__headline slider__headline--h2">Icon-Bilderleiste mit 1x1-Bildern</h2>
<div class="slider__detailtext">
<p>Es gibt fast nichts Schöneres, als von anderen gelobt zu werden. Die zahlreichen Testsiegel und Auszeichnungen belegen seit Jahren die hohe Qualität der BARMER.</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--icon-image" data-glide-el="track">
<ul class="glide__slides slider__slides--icon-image" aria-label="Karusell mit 11 Bilder">
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<img src="../../images/1x1/eltern-baby-tablet-1000x1000.jpg" alt="" loading="lazy">
</picture>
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<img src="../../images/1x1/eltern-baby-tablet-1000x1000.jpg" alt="" loading="lazy">
</picture>
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<source media="(min-width: 641px)" srcset="../../images/1x1/eltern-baby-tablet-1000x1000.jpg">
<img src="../../images/1x1/eltern-baby-tablet-1000x1000.jpg" alt="" loading="lazy">
</picture>
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
<li class="glide__slide slider__slide--icon-image">
<a href="" class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="m-slider-bullets glide__bullets slider-bullets--disc" aria-hidden="true">
<ul class="slider-bullets__list" data-glide-el="controls[nav]">
<li class="slider-bullet glide__bullet" data-glide-dir="=0">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 1</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet" data-glide-dir="=1">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 2</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
<li class="slider-bullet glide__bullet glide__bullet--active" data-glide-dir="=2">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 3</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
</li>
</ul>
</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": true,
"slideCount": 11,
"hasExternalContent": false,
"hasArrowsTop": true,
"hasDynamicSlides": true
},
"viewtypes": {
"specifier": "slider--icon-image",
"sliderType": "icon-image",
"arrowsType": "slider-arrows--chevron-pair",
"bulletsType": "slider-bullets--disc",
"headline": "slider__headline--h2"
},
"content": {
"title": "Icon-Bilderleiste mit 1x1-Bildern",
"detailText": "Es gibt fast nichts Schöneres, als von anderen gelobt zu werden. Die zahlreichen Testsiegel und Auszeichnungen belegen seit Jahren die hohe Qualität der BARMER.",
"config": "",
"elementName": "Bilder",
"ratio": false
},
"partials": {
"includedItemType": "teaser--icon-image",
"slide": [
{
"switches": {
"isLinkable": true,
"hasPictureWithSrcset": true
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg"
}
],
"img": {
"src": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg",
"alt": ""
}
}
}
}
},
{
"switches": {
"isLinkable": true,
"hasPictureWithSrcset": false
}
},
{
"switches": {
"isLinkable": true,
"hasPictureWithSrcset": true
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg"
}
],
"img": {
"src": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg",
"alt": ""
}
}
}
}
},
{
"switches": {
"isLinkable": true,
"hasPictureWithSrcset": true
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg"
}
],
"img": {
"src": "../../images/1x1/eltern-baby-tablet-1000x1000.jpg",
"alt": ""
}
}
}
}
},
{
"switches": {
"isLinkable": true,
"hasPictureWithSrcset": false
}
},
{
"switches": {
"isLinkable": true,
"hasPictureWithSrcset": false
}
}
],
"arrows": {
"switches": {
"hasAriaAttr": true
},
"content": {
"ariaAttr": "aria-hidden=\"true\""
}
}
}
}
No notes defined.