Barmer Fractal

Slider: Video And Topics With Video Teaser 

<div class="o-slider glide js-slider-init slider--video-and-topics js-teaser-targeting-init" data-slider-type="video-and-topics" data-glide-config="{&quot;autoplay&quot;: 10000 }">

    <h2 class="slider__headline slider__headline--h3">Viele Extraleistungen für jede Lebensphase ich bin ein lange lange lange lange Headline</h2>

    <div class="slider__detailtext">

        <p>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</p>
    </div>

    <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--video-and-topics" data-glide-el="track">
                <ul class="glide__slides slider__slides--video-and-topics" aria-label="Karusell mit 3 Elementen">
                    <li class="glide__slide slider__slide--video-and-topics">

                        <div class="o-teaser teaser--video-and-topics">

                            <div class="teaser__image">

                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
                                    <img src="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="" loading="lazy">
                                </picture>

                                <button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="internal" data-video-id="1" data-video-src="../../videos/barmer-video-stark-8x3.mp4" aria-label="Berufstätige Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>

                                <template id="video-template-1">
                                    <video class="a-video" controls>
                                        <source src="../../videos/barmer-video-stark-8x3.mp4" type="video/mp4">
                                        <p>Video tag fallback content</p>
                                    </video>

                                </template>
                            </div>

                            <h4 class="teaser__headline">
                                Berufstätige

                            </h4>

                            <div class="teaser__text">
                                Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein

                            </div>

                        </div>

                    </li>
                    <li class="glide__slide slider__slide--video-and-topics">

                        <div class="o-teaser teaser--video-and-topics">

                            <div class="teaser__image">

                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
                                    <img src="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg" alt="" loading="lazy">
                                </picture>

                                <button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="external" data-video-id="2" data-video-src="https://www.youtube.com/embed/hItuak56cqg" aria-label="Familien Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>

                                <template id="video-template-2">
                                    <div class="a-video video--embed">
                                        <iframe src="https://www.youtube.com/embed/hItuak56cqg" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
                                    </div>

                                </template>
                            </div>

                            <h4 class="teaser__headline">
                                Familien

                            </h4>

                            <div class="teaser__text">
                                Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern

                            </div>

                        </div>

                    </li>
                    <li class="glide__slide slider__slide--video-and-topics">

                        <div class="o-teaser teaser--video-and-topics">

                            <div class="teaser__image">

                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
                                    <img src="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg" alt="" loading="lazy">
                                </picture>

                                <button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="external" data-video-id="3" data-video-src="https://www.youtube.com/embed/BGam1KihgbI" aria-label="Studierende Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>

                                <template id="video-template-3">
                                    <div class="a-video video--embed">
                                        <iframe src="https://www.youtube-nocookie.com/embed/BGam1KihgbI" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
                                    </div>

                                </template>
                            </div>

                            <h4 class="teaser__headline">
                                Studierende

                            </h4>

                            <div class="teaser__text">
                                Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern

                            </div>

                        </div>

                    </li>
                </ul>
            </div>

        </div>

    </div>

    <label class="a-toggle js-consent-toggle" for="toggle-checkbox">
        <span class="toggle__text-label">Externe Inhalte zulassen</span>
        <input class="toggle__checkbox" type="checkbox" id="toggle-checkbox" />
        <span class="toggle__slider" data-text-enabled="ja" data-text-disabled="nein">
            <span class="toggle__indicator"></span>
        </span>
        <span class="sr-only toggle__alert" aria-live="polite" data-text-checked="Externe Inhalte sind jetzt zugelassen" data-text-unchecked="Externe Inhalte sind jetzt geblockt"></span>
    </label>

</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": true,
    "hasDetailText": true,
    "hasArrowsBottom": false,
    "hasBullets": false,
    "slideCount": 3,
    "hasExternalContent": true,
    "hasArrowsTop": true
  },
  "viewtypes": {
    "specifier": "slider--video-and-topics js-teaser-targeting-init",
    "sliderType": "video-and-topics",
    "arrowsType": "slider-arrows--chevron-pair",
    "bulletsType": "slider-bullets--disc",
    "headline": "slider__headline--h3"
  },
  "content": {
    "title": "Viele Extraleistungen für jede Lebensphase ich bin ein lange lange lange lange Headline",
    "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": 10000
    },
    "elementName": "Elementen",
    "ratio": false
  },
  "partials": {
    "includedItemType": "teaser--video-and-topics",
    "slide": [
      {
        "switches": {
          "isLinkable": false,
          "hasTextChevron": false,
          "hasPictureWithSrcset": true
        },
        "viewtypes": {
          "specifier": "teaser--video-and-topics"
        },
        "content": {
          "headline": "Berufstätige",
          "videoTemplateId": "1",
          "videoType": "video--default"
        },
        "partials": {
          "teaserText": {
            "content": {
              "text": "Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein"
            }
          },
          "picture": {
            "content": {
              "sources": [
                {
                  "media": "(max-width: 640px)",
                  "srcset": "../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg"
                },
                {
                  "media": "(min-width: 641px)",
                  "srcset": "../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg"
                }
              ],
              "img": {
                "src": "../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg",
                "alt": ""
              }
            }
          },
          "playButton": {
            "viewtypes": {
              "specifier": "btn--play js-modal-trigger"
            },
            "content": {
              "ariaControls": "bm-video",
              "ariaLabel": "Berufstätige Video abspielen",
              "dataAttributes": "data-video-type=\"internal\" data-video-id=\"1\" data-video-src=\"../../videos/barmer-video-stark-8x3.mp4\""
            }
          },
          "consentToggle": {}
        }
      },
      {
        "switches": {
          "isLinkable": false,
          "hasTextChevron": false,
          "hasPictureWithSrcset": true
        },
        "viewtypes": {
          "specifier": "teaser--video-and-topics"
        },
        "content": {
          "headline": "Familien",
          "videoTemplateId": "2",
          "videoType": "video--external"
        },
        "partials": {
          "teaserText": {
            "content": {
              "text": "Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern"
            }
          },
          "picture": {
            "content": {
              "sources": [
                {
                  "media": "(max-width: 640px)",
                  "srcset": "../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg"
                },
                {
                  "media": "(min-width: 641px)",
                  "srcset": "../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg"
                }
              ],
              "img": {
                "src": "../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg",
                "alt": ""
              }
            }
          },
          "playButton": {
            "viewtypes": {
              "specifier": "btn--play js-modal-trigger"
            },
            "content": {
              "ariaControls": "bm-video",
              "ariaLabel": "Familien Video abspielen",
              "dataAttributes": "data-video-type=\"external\" data-video-id=\"2\" data-video-src=\"https://www.youtube.com/embed/hItuak56cqg\""
            }
          },
          "videoTemplate": {
            "content": {
              "src": "https://www.youtube.com/embed/hItuak56cqg"
            }
          }
        }
      },
      {
        "switches": {
          "isLinkable": false,
          "hasTextChevron": false,
          "hasPictureWithSrcset": true
        },
        "viewtypes": {
          "specifier": "teaser--video-and-topics"
        },
        "content": {
          "headline": "Studierende",
          "videoTemplateId": "3",
          "videoType": "video--external"
        },
        "partials": {
          "teaserText": {
            "content": {
              "text": "Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern"
            }
          },
          "picture": {
            "content": {
              "sources": [
                {
                  "media": "(max-width: 640px)",
                  "srcset": "../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg"
                },
                {
                  "media": "(min-width: 641px)",
                  "srcset": "../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg"
                }
              ],
              "img": {
                "src": "../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg",
                "alt": ""
              }
            }
          },
          "playButton": {
            "viewtypes": {
              "specifier": "btn--play js-modal-trigger"
            },
            "content": {
              "ariaControls": "bm-video",
              "ariaLabel": "Studierende Video abspielen",
              "dataAttributes": "data-video-type=\"external\" data-video-id=\"3\" data-video-src=\"https://www.youtube.com/embed/BGam1KihgbI\""
            }
          }
        }
      }
    ]
  }
}

No notes defined.