<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="36x11">
<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/36x11/mr-right.jpg">
<img src="../../images/36x11/mr-right.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/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.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-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/36x11/mr-right.jpg">
<img src="../../images/36x11/mr-right.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">Haben Sie eine Vorstellung, wie das Leben als Teaser ist?</h3>
<div class="teaser-collection__text">
<p>Swipen Sie weiter nach rechts und hören Sie sich das Gejammer meiner Slide-Kollegin an und Sie wissen, was ich hier durchmache!</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/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
<img src="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.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 der letzte Teaser im Slider und ich bitte Sie: ignorieren Sie mich nicht.</h3>
<div class="teaser-collection__text">
<p>So sehr sich die anderen drei Slides bemühen, mir gegenüber nicht so zu tun, als wäre ich das letzte Slide – ich weiß es besser. Und in den stillen Momenten, wenn der/die Nutzer/in bereits bei einem der drei vorigen Slides abgesprungen sind und weiter nach unten gescrollt haben, das sind die Momente an denen ich zu knabbern habe.</p>
<p>All die Advertorials, Module, Textmodule, sie haben alle Spaß und ergötzen sich am Blick des Besuchers. Nur ich, ich friste mein Dasein am rechten Rand, außerhalb des Viewports, als viertes Slide.</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": "36x11"
},
"partials": {
"includedItemType": "teaser--stage-with-docking-and-seal",
"slide": [
{
"switches": {},
"viewtypes": {
"specifier": "teaser--stage cs--bg-image-c",
"dockingSpecifier": "cs--b"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-tablet.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/36x11/mr-right.jpg"
}
],
"img": {
"src": "../../images/36x11/mr-right.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/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
}
],
"img": {
"src": "../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.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-c",
"dockingSpecifier": "cs--b"
},
"content": {},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-tablet.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/36x11/mr-right.jpg"
}
],
"img": {
"src": "../../images/36x11/mr-right.jpg",
"alt": ""
}
}
},
"dockingPlacement": {
"switches": {},
"viewtypes": {},
"content": {
"headline": "Haben Sie eine Vorstellung, wie das Leben als Teaser ist?"
},
"partials": {
"richtext": {
"content": {
"text": "<p>Swipen Sie weiter nach rechts und hören Sie sich das Gejammer meiner Slide-Kollegin an und Sie wissen, was ich hier durchmache!</p>"
}
}
}
}
}
},
{
"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/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
}
],
"img": {
"src": "../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg",
"alt": ""
}
}
},
"dockingPlacement": {
"switches": {},
"viewtypes": {},
"content": {
"headline": "Ich bin der letzte Teaser im Slider und ich bitte Sie: ignorieren Sie mich nicht."
},
"partials": {
"richtext": {
"content": {
"text": "<p>So sehr sich die anderen drei Slides bemühen, mir gegenüber nicht so zu tun, als wäre ich das letzte Slide – ich weiß es besser. Und in den stillen Momenten, wenn der/die Nutzer/in bereits bei einem der drei vorigen Slides abgesprungen sind und weiter nach unten gescrollt haben, das sind die Momente an denen ich zu knabbern habe.</p><p>All die Advertorials, Module, Textmodule, sie haben alle Spaß und ergötzen sich am Blick des Besuchers. Nur ich, ich friste mein Dasein am rechten Rand, außerhalb des Viewports, als viertes Slide.</p>"
}
}
}
}
}
}
],
"bullets": {
"switches": {
"slideCount": 4
},
"partials": {
"slide": [
{},
{},
{},
{}
]
}
}
}
}
No notes defined.