<div class="o-slider glide js-slider-init slider--stage slider--stage-with-docking" data-slider-type="stage" data-glide-config="{"autoplay": false }" data-content-ratio="8x3">
<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 4 Elementen">
<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/eltern-sohn-toben-1080x405.jpg">
<img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--b">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>
<div class="teaser-collection__text">
<p>Du konzentrierst dich auf deine Ausbildung, wir kümmern uns um deine Gesundheit,. Die Barmer wurde als "Top Krankenkasse für junge Leute" (FOCUS MONEY 21/2020) ausgezeichnet. "Sehr gute digitale Leistungen" heißt es in der Auszeichnung - und das stimmt: Wir sind immer für dich da, wenn du uns brauchst.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<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>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</a>
</div>
</div>
</div>
</li>
<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/frau-arm-pflaster-1080x405.jpg">
<img src="../../images/8x3/frau-arm-pflaster-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--c">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Ich bin eine Siegelliste die mit Farbschema C überschrieben wird</h3>
<div class="teaser-collection__text">
<p>Dieser Teasercollection-Text besitzt so viel Text, dass er die Teasercollection in einem Maße so weit aufspannen sollte, wie es bei keinem der vier anderen eingehängten Teasercollection der Fall ist. Es gilt auch, in zugegebenermaßen recht geschwätziger Art und Weise, darauf hinzuweisen, dass dann als nächster Teasercollection nur ein kleiner, winziger Text erscheinen sollte, um beide Extreme abbilden zu können. Was mir hoffentlich hiermit gelungen ist.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<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>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</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/frau-tablet-arzt-1080x405.jpg">
<img src="../../images/8x3/frau-tablet-arzt-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--d">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>
<div class="teaser-collection__text">
<p>Ein kleiner Text, der die Teasercollection kaum aufspannen sollte. Eingesetztes Farbschema: D</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<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>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</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/mutter-kind-schoss-1080x405.jpg">
<img src="../../images/8x3/mutter-kind-schoss-1080x405.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__content">
<div class="teaser__headline-wrapper">
<div class="teaser__headline">
Dieser Bühnen-Teaser sollte auch eine Docking-Area haben
</div>
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--conversion" href="" title="">
Klicken Sie auf den Teaser-CTA
</a>
</div>
</div>
</div>
<div class="teaser__docking-placement cs--a">
<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">
<h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>
<div class="teaser-collection__text">
<p>Auch dies soll kein umfangreicher Text werden und nur darauf hinweisen, dass diese Teasercollection mit Farbschema A überschrieben wird.</p>
</div>
<div class="teaser-collection__teaser-wrapper">
<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>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
<div class="o-teaser teaser--icon-image">
<div class="teaser__image">
<img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--secondary" href="" title="">
Mehr erfahren
</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>
<li class="slider-bullet glide__bullet" data-glide-dir="=3">
<button class="slider-bullet__button"><span class="sr-only">Zum Element 4</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": 4,
"hasExternalContent": false,
"hasArrowsTop": false
},
"viewtypes": {
"specifier": "slider--stage slider--stage-with-docking",
"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": "false"
},
"elementName": "Elementen",
"ratio": "8x3"
},
"partials": {
"includedItemType": "teaser--stage-with-docking-and-seal",
"slide": [
{
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-c",
"dockingSpecifier": "cs--b"
},
"content": {},
"partials": {
"badgeImage": {
"type": "badge-image--default"
},
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-tablet.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/8x3/eltern-sohn-toben-1080x405.jpg"
}
],
"img": {
"src": "../../images/8x3/eltern-sohn-toben-1080x405.jpg",
"alt": ""
}
}
},
"dockingPlacement": {
"switches": {},
"viewtypes": {},
"content": {},
"partials": {}
}
}
},
{
"switches": {},
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-a",
"dockingSpecifier": "cs--c"
},
"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/frau-arm-pflaster-1080x405.jpg"
}
],
"img": {
"src": "../../images/8x3/frau-arm-pflaster-1080x405.jpg",
"alt": ""
}
}
},
"dockingPlacement": {
"switches": {},
"viewtypes": {},
"content": {
"headline": "Ich bin eine Siegelliste die mit Farbschema C überschrieben wird"
},
"partials": {
"richtext": {
"content": {
"text": "<p>Dieser Teasercollection-Text besitzt so viel Text, dass er die Teasercollection in einem Maße so weit aufspannen sollte, wie es bei keinem der vier anderen eingehängten Teasercollection der Fall ist. Es gilt auch, in zugegebenermaßen recht geschwätziger Art und Weise, darauf hinzuweisen, dass dann als nächster Teasercollection nur ein kleiner, winziger Text erscheinen sollte, um beide Extreme abbilden zu können. Was mir hoffentlich hiermit gelungen ist.</p>"
}
}
}
}
}
},
{
"switches": {},
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-b",
"dockingSpecifier": "cs--d"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-kind.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/8x3/frau-tablet-arzt-1080x405.jpg"
}
],
"img": {
"src": "../../images/8x3/frau-tablet-arzt-1080x405.jpg",
"alt": ""
}
}
},
"dockingPlacement": {
"switches": {},
"viewtypes": {},
"content": {},
"partials": {
"richtext": {
"content": {
"text": "<p>Ein kleiner Text, der die Teasercollection kaum aufspannen sollte. Eingesetztes Farbschema: D</p>"
}
}
}
}
}
},
{
"switches": {},
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-c",
"dockingSpecifier": "cs--a"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-tablet.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/8x3/mutter-kind-schoss-1080x405.jpg"
}
],
"img": {
"src": "../../images/8x3/mutter-kind-schoss-1080x405.jpg",
"alt": ""
}
}
},
"dockingPlacement": {
"switches": {},
"viewtypes": {},
"content": {},
"partials": {
"richtext": {
"content": {
"text": "<p>Auch dies soll kein umfangreicher Text werden und nur darauf hinweisen, dass diese Teasercollection mit Farbschema A überschrieben wird.</p>"
}
}
}
}
}
}
],
"bullets": {
"switches": {
"slideCount": 4
},
"partials": {
"slide": [
{},
{},
{},
{}
]
}
}
}
}
No notes defined.