Barmer Fractal

Slider: Stage With Testimonial 

<div class="o-slider glide js-slider-init slider--stage slider--stage-with-testimonial" data-slider-type="stage" data-glide-config="{&quot;autoplay&quot;: 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">
                                        Schaut her, ein Bühnen-Teaser mit Zitat!

                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="teaser__testimonial-placement">

                            <figure class="m-figure figure--blockquote">

                                <blockquote class="figure__blockquote a-richtext">
                                    <p>Es gibt Millionen gute Gründe für unseren Job!</p>
                                </blockquote>

                                <figcaption class="figure__figcaption figure__figcaption--blockquote-source">
                                    &ndash; Kurt-Hans Zwetschgenkerze von Moselbach zur Heide (99), Gentleman Host
                                </figcaption>
                            </figure>

                            <div class="teaser__button-wrapper">
                                <a class="a-btn btn--conversion" href="" title="">
                                    Klicken Sie auf den Teaser-CTA
                                </a>

                            </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">
                                        Schaut her, ein Bühnen-Teaser mit Zitat!

                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="teaser__testimonial-placement">

                            <figure class="m-figure figure--blockquote">

                                <blockquote class="figure__blockquote a-richtext">
                                    <p>Wir arbeiten miteinander, denn nur gemeinsam kann Barmer Gesundheit weiterdenken. Das bedeutet, wir helfen unseren Kunden, gesünder zu leben und <strong>bei Krankheit</strong> die bestmögliche Versorgung zu erhalten. Deshalb unterstützen wir sie bei der Behandlung, einer schnellen Genesung und einer nachhaltigen Prävention. Mit diesem Anspruch entwickeln wir uns weiter, erkennen frühzeitig gesellschaftliche Trends und machen den medizinische Fortschritt allen Menschen zugänglich.</p>

                                    <p>Es gibt Millionen gute Gründe für unseren Job</p>
                                </blockquote>

                                <figcaption class="figure__figcaption figure__figcaption--blockquote-source">
                                    &ndash; Johnny (8)
                                </figcaption>
                            </figure>

                            <div class="teaser__button-wrapper">
                                <a class="a-btn btn--conversion" href="" title="">
                                    Klicken Sie auf den Teaser-CTA
                                </a>

                            </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">
                                        Schaut her, ein Bühnen-Teaser mit Zitat!

                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="teaser__testimonial-placement">

                            <figure class="m-figure figure--blockquote">

                                <blockquote class="figure__blockquote a-richtext">
                                    <p>Es gibt zu viele Menschen, die lieber anonym bleiben wollen</p>
                                </blockquote>

                            </figure>

                            <div class="teaser__button-wrapper">
                                <a class="a-btn btn--conversion" href="" title="">
                                    Klicken Sie auf den Teaser-CTA
                                </a>

                            </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">
                                        Schaut her, ein Bühnen-Teaser mit Zitat!

                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="teaser__testimonial-placement">

                            <div class="teaser__button-wrapper">
                                <a class="a-btn btn--conversion" href="" title="">
                                    Klicken Sie auf den Teaser-CTA
                                </a>

                            </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="{&quot;autoplay&quot;: {{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-testimonial",
    "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-testimonial",
    "slide": [
      {
        "viewtypes": {
          "specifier": "teaser--stage cs--bg-image-c"
        },
        "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": ""
              }
            }
          },
          "blockquote": {
            "content": {
              "blockquoteRichtext": "<p>Es gibt Millionen gute Gründe für unseren Job!</p>",
              "blockquoteSourceName": "Kurt-Hans Zwetschgenkerze von Moselbach zur Heide",
              "blockquoteSourceAge": "99",
              "blockquoteSourcePosition": "Gentleman Host"
            }
          }
        }
      },
      {
        "switches": {},
        "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/frau-arm-pflaster-1080x405.jpg"
                }
              ],
              "img": {
                "src": "../../images/8x3/frau-arm-pflaster-1080x405.jpg",
                "alt": ""
              }
            }
          },
          "blockquote": {
            "content": {
              "blockquoteRichtext": "<p>Wir arbeiten miteinander, denn nur gemeinsam kann Barmer Gesundheit weiterdenken. Das bedeutet, wir helfen unseren Kunden, gesünder zu leben und <strong>bei Krankheit</strong> die bestmögliche Versorgung zu erhalten. Deshalb unterstützen wir sie bei der Behandlung, einer schnellen Genesung und einer nachhaltigen Prävention. Mit diesem Anspruch entwickeln wir uns weiter, erkennen frühzeitig gesellschaftliche Trends und machen den medizinische Fortschritt allen Menschen zugänglich.</p>\n\n      <p>Es gibt Millionen gute Gründe für unseren Job</p>",
              "blockquoteSourceName": "Johnny",
              "blockquoteSourceAge": "8",
              "blockquoteSourcePosition": false
            }
          }
        }
      },
      {
        "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/frau-tablet-arzt-1080x405.jpg"
                }
              ],
              "img": {
                "src": "../../images/8x3/frau-tablet-arzt-1080x405.jpg",
                "alt": ""
              }
            }
          },
          "blockquote": {
            "switches": {
              "hasFigcaption": false
            },
            "content": {
              "blockquoteRichtext": "<p>Es gibt zu viele Menschen, die lieber anonym bleiben wollen</p>"
            }
          }
        }
      },
      {
        "switches": {
          "hasButton": false,
          "hasTestimonialButton": true,
          "hasTestimonialPlacement": true,
          "hasTestimonial": false
        },
        "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/mutter-kind-schoss-1080x405.jpg"
                }
              ],
              "img": {
                "src": "../../images/8x3/mutter-kind-schoss-1080x405.jpg",
                "alt": ""
              }
            }
          },
          "blockquote": {}
        }
      }
    ],
    "bullets": {
      "switches": {
        "slideCount": 4
      },
      "partials": {
        "slide": [
          {},
          {},
          {},
          {}
        ]
      }
    }
  }
}

No notes defined.