<div class="o-slider glide js-slider-init slider--stage" data-slider-type="stage" data-glide-config="{"autoplay": 4000 }">
<div class="slider__area">
<div class="slider__track-wrapper">
<div class="slider__track glide__track slider__track--stage" data-glide-el="track">
<ul class="glide__slides slider__slides--stage" aria-label="Karusell mit 3 Elementen">
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-a">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dies ist ein Bühnen-Teaser ...Lazyloaded...
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-b">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg">
<img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dies ist ein Bühnen-Teaser ...Lazyloaded...
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--stage">
<div class="o-teaser teaser--stage cs--bg-image-c">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg">
<img src="../../images/8x3/frau-arm-pflaster-1080x405.jpg" alt="">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dies ist ein Bühnen-Teaser ...Lazyloaded...
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Mitglied werden
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron " data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Zum vorigen Bild</span><img src="../../img/angle-left-dropshadow.svg" alt="" title="" class="a-image ">
</button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Zum nächsten Bild</span><img src="../../img/angle-right-dropshadow.svg" alt="" title="" class="a-image ">
</button>
</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": false,
"hasDetailText": false,
"hasArrowsBottom": true,
"hasBullets": true,
"slideCount": 3,
"hasExternalContent": false,
"hasArrowsTop": false
},
"viewtypes": {
"specifier": "slider--stage",
"sliderType": "stage",
"arrowsType": "slider-arrows--chevron",
"bulletsType": "slider-bullets--disc"
},
"content": {
"title": "Viele Extraleistungen für jede Lebensphase",
"detailText": "Die BARMER bietet Ihnen mit ihrer Krankenversicherung einen umfassenden Gesundheitsschutz und ist mit rund 9 Millionen Versicherten in Deutschland ein starker Partner für alle Fragen zur Gesundheit",
"config": {
"autoplay": "4000"
},
"elementName": "Elementen",
"ratio": false
},
"partials": {
"includedItemType": "teaser--stage",
"slide": [
{
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-a"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
}
],
"img": {
"src": "../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg",
"alt": ""
}
}
}
}
},
{
"switches": {},
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-b"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-kind.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/8x3/eltern-sohn-toben-1080x405.jpg"
}
],
"img": {
"src": "../../images/8x3/eltern-sohn-toben-1080x405.jpg",
"alt": ""
}
}
}
}
},
{
"switches": {},
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-c"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-tablet.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/8x3/frau-arm-pflaster-1080x405.jpg"
}
],
"img": {
"src": "../../images/8x3/frau-arm-pflaster-1080x405.jpg",
"alt": ""
}
}
}
}
}
]
}
}
No notes defined.