Barmer Fractal

Advertorial: With Slider 

<div class="o-advertorial ">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Damit ihr Zeit für die wirklich wichtigen Dinge habt!</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <div class="o-slider glide js-slider-init slider--advertorial" data-slider-type="advertorial" data-glide-config="{&quot;autoplay&quot;: 10000 }">

            <div class="slider__area">

                <div class="slider__track-wrapper">

                    <div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
                        <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--advertorial" data-glide-el="track">
                        <ul class="glide__slides slider__slides--advertorial" aria-label="Karusell mit 6 Elementen">
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
                                    <img src="../../images/5x7/mann-mit-tablet.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/eltern-kind-blumen-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/eltern-kind-blumen-714x1000.jpg">
                                    <img src="../../images/5x7/eltern-kind-blumen-714x1000.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/eltern-baby-tablet-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
                                    <img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/tippen-auf-tastatur-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/tippen-auf-tastatur-714x1000.jpg">
                                    <img src="../../images/5x7/tippen-auf-tastatur-714x1000.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/laechelnder-mann-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/laechelnder-mann-714x1000.jpg">
                                    <img src="../../images/5x7/laechelnder-mann-714x1000.jpg" alt="">
                                </picture>

                            </li>
                            <li class="glide__slide slider__slide--advertorial">
                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/4x3/abstimmung-des-verwaltungsrats-712x534.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
                                    <img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="">
                                </picture>

                            </li>
                        </ul>
                    </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>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=4">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 5</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                        <li class="slider-bullet glide__bullet" data-glide-dir="=5">
                            <button class="slider-bullet__button"><span class="sr-only">Zum Element 6</span><i class="a-icon icon--dot" aria-hidden="true"></i></button>
                        </li>
                    </ul>
                </div>

            </div>

        </div>

    </div>
</div>
 
<div class="o-advertorial {{viewtypes.specifier}}">
  <div class="advertorial__content">
    {{#switches.hasOverline}}
      <div class="advertorial__overline">{{content.overline}}</div>
    {{/switches.hasOverline}}

    {{#switches.hasHeadline}}
      <h3 class="advertorial__headline">{{content.headline}}</h3>
    {{/switches.hasHeadline}}

    {{#switches.hasDetailtext}}
      <div class="advertorial__detailtext">
        {{render '@richtext' partials.richtext merge=true}}
      </div>
    {{/switches.hasDetailtext}}

    {{#switches.hasObjects}}
      <div class="advertorial__objects-wrapper">

        {{#switches.hasIconbar}}
          <div class="advertorial__iconbar" role="list">
            {{# each partials.iconbarTeasers as |iconbarTeaser| }}
              {{render '@teaser--iconbar' iconbarTeaser merge=true}}
            {{/each}}
          </div>
        {{/switches.hasIconbar}}

        {{#switches.hasExternalLinks}}
          {{# each partials.externalLinks as |button| }}
            {{render '@button--with-image' button merge=true}}
          {{/each}}
        {{/switches.hasExternalLinks}}
      </div>
    {{/switches.hasObjects}}

    {{#switches.hasModal}}
    {{render '@button--primary' partials.modalTriggerButton merge=true}}
    {{/switches.hasModal}}

    {{#switches.hasCTA}}
      {{render '@button' partials.cta merge=true}}
    {{/switches.hasCTA}}

    {{#switches.hasModal}}
      <template class="teaser__modal js-modal-by-ttag-target">
        {{ render '@modal--qr-codes' partials.modal merge=true }}
      </template>
    {{/switches.hasModal}}

    {{#switches.hasLocalSettings}}
      <div class="advertorial__local-settings">
        <p>{{content.localSettingText}}</p>
        {{render '@link--with-chevron-right' partials.localSettingLink merge=true}}
      </div>
    {{/switches.hasLocalSettings}}
  </div>
  <div class="advertorial__imagerie">
    {{#switches.hasSlider}}
      {{render '@slider--advertorial' partials.slider merge=true}}
    {{/switches.hasSlider}}
    {{^switches.hasSlider}}
      {{ render '@picture' partials.pictures merge=true}}
    {{/switches.hasSlider}}
  </div>
</div>
 
{
  "viewtypes": {
    "specifier": ""
  },
  "switches": {
    "hasOverline": false,
    "hasHeadline": true,
    "hasDetailtext": true,
    "hasModal": false,
    "hasObjects": false,
    "hasIconbar": false,
    "hasExternalLinks": false,
    "hasCTA": true,
    "hasLocalSettings": true,
    "hasSlider": true
  },
  "content": {
    "overline": "Hier wird eine Overline ausgespielt.",
    "headline": "Damit ihr Zeit für die wirklich wichtigen Dinge habt!",
    "localSettingText": "Sie haben schon ein Benutzerkonto?"
  },
  "partials": {
    "richtext": {
      "switches": {
        "isMusterContent": false,
        "hasDefaultText": false
      },
      "content": {
        "text": "<p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>"
      }
    },
    "cta": {
      "viewtypes": {
        "specifier": "btn--primary"
      },
      "switches": {
        "asLink": true
      }
    },
    "pictures": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 640px)",
            "srcset": "../../images/4x3/mann-mit-tablet.jpg"
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/5x7/mann-mit-tablet.jpg"
          }
        ],
        "img": {
          "src": "../../images/5x7/mann-mit-tablet.jpg",
          "alt": "Dies ist ein alternativ Text"
        }
      }
    },
    "localSettingLink": {
      "content": {
        "text": "Hier geht es direkt zum Login!"
      }
    }
  }
}

No notes defined.