<div class="o-slider glide js-slider-init slider--comparison js-equal-height-segments" data-slider-type="comparison" data-glide-config="{"autoplay": }" data-equal-height-segments="{ "root": ".teaser--comparison", "segments": [ ".teaser__header", ".teaser__subline", ".teaser__text", ".teaser__footer" ] }" data-start-at-mobile="0">
<h2 class="slider__headline slider__headline--h3">Comparison Slider Simple</h2>
<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--comparison" data-glide-el="track">
<ul class="glide__slides slider__slides--comparison" aria-label="Karusell mit 5 Bilder">
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison">
<div class="teaser__header">
<h4 class="teaser__headline">Digitale Kurse</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Bewegungskurs</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Ernährungskurs</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Nichtraucherkurs</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Entspannungskurs</strong></li>
</ul>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<h4 class="teaser__headline">Fitness</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Fitnessstudio</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Hochschulsport</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Betriebssport</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Rückbildungsgymnastik</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Teilnahme an Sportveranstaltungen</strong></li>
</ul>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<h4 class="teaser__headline">Sportvereine</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Schwimmverein</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Fußballverein</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Tanzverein</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Kampfsportverein</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Leichtathletikverein</strong></li>
</ul>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<h4 class="teaser__headline">Kinder</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-kind.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Kinderturnen</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Karate-Kurs</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Fußballtraining</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Schwimmkurse</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>U-Untersuchungen</strong></li>
</ul>
</div>
</div>
</div>
</li>
<li class="glide__slide slider__slide--comparison">
<div class="o-teaser teaser--comparison js-modal-by-ttag-init">
<div class="teaser__header">
<h4 class="teaser__headline">Vorsorge</h4>
</div>
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 1024px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<source media="(min-width: 1025px)" srcset="../../images/16x9/mann-mit-tablet.jpg" width="160" height="90">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
<div class="a-richtext">
<ul class="rte--list">
<li><i aria-hidden="true" role="presentation"></i><strong><abbr tabindex="0" title="zum Beispiel">z. B.</abbr> Kinder- und Jugenduntersuchung</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Haut-Check</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Gesundheits-Check-Up</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Krebsvorsorge</strong></li>
<li><i aria-hidden="true" role="presentation"></i><strong>Schutzimpfungen</strong></li>
</ul>
</div>
</div>
</div>
</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": false,
"hasArrowsBottom": false,
"hasBullets": false,
"slideCount": 5,
"hasExternalContent": false,
"hasSubtitle": false,
"hasArrowsTop": true,
"hasDataAttributes": true
},
"viewtypes": {
"specifier": "slider--comparison js-equal-height-segments",
"sliderType": "comparison",
"arrowsType": "slider-arrows--chevron-pair",
"bulletsType": "slider-bullets--disc",
"headline": "slider__headline--h3"
},
"content": {
"title": "Comparison Slider Simple",
"detailText": "Eine neue Zeile.",
"config": "",
"elementName": "Bilder",
"ratio": false,
"subtitle": "Ein optionaler Text",
"dataAttributes": "data-equal-height-segments=\"{ "root": ".teaser--comparison", "segments": [ ".teaser__header", ".teaser__subline", ".teaser__text", ".teaser__footer" ] }\" data-start-at-mobile=\"0\""
},
"partials": {
"includedItemType": "teaser--comparison",
"slide": [
{
"switches": {
"isPlaceholder": false,
"hasFooterImage": false
},
"viewtypes": {
"specifier": "teaser--comparison"
},
"content": {
"label": "",
"headline": "Digitale Kurse",
"subline": "",
"footerText": "",
"richtext": "<ul class=\"rte--list\"><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong><abbr tabindex=\"0\" title=\"zum Beispiel\">z. B.</abbr> Bewegungskurs</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Ernährungskurs</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Nichtraucherkurs</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Entspannungskurs</strong></li></ul>"
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 1024px)",
"srcset": "../../images/16x9/mann-mit-tablet.jpg",
"width": "160",
"height": "90"
},
{
"media": "(min-width: 1025px)",
"srcset": "../../images/16x9/mann-mit-tablet.jpg",
"width": "160",
"height": "90"
}
],
"img": {
"src": "../../images/16x9/mann-mit-tablet.jpg",
"alt": "Dies ist ein alternativ Text",
"width": false,
"height": false
}
}
},
"includedImage": "image--logo-barmer-white"
}
},
{
"switches": {},
"content": {
"label": "",
"headline": "Fitness",
"subline": "",
"richtext": "<ul class=\"rte--list\"><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong><abbr tabindex=\"0\" title=\"zum Beispiel\">z. B.</abbr> Fitnessstudio</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Hochschulsport</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Betriebssport</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Rückbildungsgymnastik</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Teilnahme an Sportveranstaltungen</strong></li></ul>",
"footerText": ""
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 1024px)",
"srcset": "../../images/16x9/mann-mit-kind.jpg",
"width": "160",
"height": "90"
},
{
"media": "(min-width: 1025px)",
"srcset": "../../images/16x9/mann-mit-kind.jpg",
"width": "160",
"height": "90"
}
],
"img": {
"src": "../../images/16x9/mann-mit-kind.jpg",
"alt": "Dies ist ein alternativ Text",
"width": false,
"height": false
}
}
},
"includedImage": "image--logo-barmer-white"
}
},
{
"switches": {},
"content": {
"label": "",
"headline": "Sportvereine",
"subline": "",
"richtext": "<ul class=\"rte--list\"><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong><abbr tabindex=\"0\" title=\"zum Beispiel\">z. B.</abbr> Schwimmverein</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Fußballverein</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Tanzverein</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Kampfsportverein</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Leichtathletikverein</strong></li></ul>",
"footerText": ""
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 1024px)",
"srcset": "../../images/16x9/mann-mit-tablet.jpg",
"width": "160",
"height": "90"
},
{
"media": "(min-width: 1025px)",
"srcset": "../../images/16x9/mann-mit-tablet.jpg",
"width": "160",
"height": "90"
}
],
"img": {
"src": "../../images/16x9/mann-mit-tablet.jpg",
"alt": "Dies ist ein alternativ Text",
"width": false,
"height": false
}
}
},
"includedImage": "image--logo-barmer-white"
}
},
{
"switches": {},
"content": {
"label": "",
"headline": "Kinder",
"subline": "",
"richtext": "<ul class=\"rte--list\"><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong><abbr tabindex=\"0\" title=\"zum Beispiel\">z. B.</abbr> Kinderturnen</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Karate-Kurs</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Fußballtraining</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Schwimmkurse</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>U-Untersuchungen</strong></li></ul>",
"footerText": ""
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 1024px)",
"srcset": "../../images/16x9/mann-mit-kind.jpg",
"width": "160",
"height": "90"
},
{
"media": "(min-width: 1025px)",
"srcset": "../../images/16x9/mann-mit-kind.jpg",
"width": "160",
"height": "90"
}
],
"img": {
"src": "../../images/16x9/mann-mit-kind.jpg",
"alt": "Dies ist ein alternativ Text",
"width": false,
"height": false
}
}
},
"includedImage": "image--logo-barmer-white"
}
},
{
"switches": {},
"content": {
"label": "",
"headline": "Vorsorge",
"subline": "",
"richtext": "<ul class=\"rte--list\"><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong><abbr tabindex=\"0\" title=\"zum Beispiel\">z. B.</abbr> Kinder- und Jugenduntersuchung</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Haut-Check</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Gesundheits-Check-Up</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Krebsvorsorge</strong></li><li><i aria-hidden=\"true\" role=\"presentation\"></i><strong>Schutzimpfungen</strong></li></ul>",
"footerText": ""
},
"partials": {
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 1024px)",
"srcset": "../../images/16x9/mann-mit-tablet.jpg",
"width": "160",
"height": "90"
},
{
"media": "(min-width: 1025px)",
"srcset": "../../images/16x9/mann-mit-tablet.jpg",
"width": "160",
"height": "90"
}
],
"img": {
"src": "../../images/16x9/mann-mit-tablet.jpg",
"alt": "Dies ist ein alternativ Text",
"width": false,
"height": false
}
}
},
"includedImage": "image--logo-barmer-white"
}
}
],
"arrows": {
"switches": {
"hasAriaAttr": true
},
"viewtypes": {},
"content": {
"ariaAttr": "aria-hidden=\"true\""
},
"partials": {}
}
}
}
No notes defined.