Barmer Fractal

Slider: Picture Gallery Original Size 

<div class="o-slider glide js-slider-init slider--picture-gallery" data-slider-type="picture-gallery" data-glide-config="{&quot;autoplay&quot;:  }">

    <h2 class="slider__headline slider__headline--h2">Bildergalerie auf Orginalgröße</h2>

    <div class="slider__detailtext">
        <p>Ein optionaler Text</p>

        <p>Eine neue Zeile.</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" 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--picture-gallery" data-glide-el="track">
                <ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 11 Bilder">
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture picture--original picture--portrait">
                                <img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
                            </picture>

                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture ">
                                <img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1293" height="1844">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
                            </figcaption>
                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture picture--original picture--landscape">
                                <img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
                            </picture>

                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture  picture--original picture--landscape">
                                <img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist ein alternativ Text" loading="lazy" width="1509" height="1059">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
                            </figcaption>
                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture picture--original picture--landscape">
                                <img src="../../images/3x2/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="960" height="640">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>3x2 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
                            </figcaption>
                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture picture--original picture--portrait">
                                <img src="../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1100" height="1650">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
                            </figcaption>
                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture ">
                                <img src="../../images/1x1/abstimmung-des-verwaltungsrats.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1000" height="1000">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>1x1 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
                            </figcaption>
                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture picture--original picture--landscape">
                                <img src="../../images/36x11/eltern-baby-tablet-1440x440.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1440" height="440">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>36x11 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
                            </figcaption>
                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture picture--original picture--landscape">
                                <img src="../../images/dummy_200_100.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="200" height="100">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>Mini Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
                            </figcaption>
                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture picture--original picture--portrait">
                                <img src="../../images/dummy_100_1000.data.png" alt="Dies ist ein alternativ Text" loading="lazy" width="100" height="1000">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>Langes Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
                            </figcaption>
                        </figure>

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

        </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": true,
    "hasDetailText": true,
    "hasArrowsBottom": false,
    "hasBullets": false,
    "slideCount": 11,
    "hasExternalContent": false,
    "hasSubtitle": true,
    "hasArrowsTop": true
  },
  "viewtypes": {
    "specifier": "slider--picture-gallery",
    "sliderType": "picture-gallery",
    "arrowsType": "slider-arrows--chevron-pair",
    "bulletsType": "slider-bullets--disc",
    "headline": "slider__headline--h2"
  },
  "content": {
    "title": "Bildergalerie auf Orginalgröße",
    "detailText": "Eine neue Zeile.",
    "config": "",
    "elementName": "Bilder",
    "ratio": false,
    "subtitle": "Ein optionaler Text"
  },
  "partials": {
    "includedItemType": "figure",
    "slide": [
      {
        "switches": {
          "hasFigcaption": false
        },
        "partials": {
          "picture": {
            "viewtypes": {
              "specifier": "picture--original picture--portrait"
            },
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/starke-regionale-unterschiede-data.jpeg",
                "alt": "Dies ist ein alternativ Text",
                "width": "1293",
                "height": "1844"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": true
        },
        "content": {
          "captionText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>"
        },
        "partials": {
          "picture": {
            "content": {
              "viewtypes": {
                "specifier": "picture--original picture--portrait"
              },
              "sources": [],
              "img": {
                "src": "../../images/starke-regionale-unterschiede-data.jpeg",
                "alt": "Dies ist ein alternativ Text",
                "width": "1293",
                "height": "1844"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": false
        },
        "partials": {
          "picture": {
            "viewtypes": {
              "specifier": "picture--original picture--landscape"
            },
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg",
                "alt": "Dies ist ein alternativ Text",
                "width": "1509",
                "height": "1059"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": true
        },
        "content": {
          "captionText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>"
        },
        "partials": {
          "picture": {
            "viewtypes": {
              "specifier": " picture--original picture--landscape"
            },
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg",
                "alt": "Dies ist ein alternativ Text",
                "width": "1509",
                "height": "1059"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": true
        },
        "content": {
          "captionText": "<p>3x2 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
        },
        "partials": {
          "picture": {
            "viewtypes": {
              "specifier": "picture--original picture--landscape"
            },
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/3x2/mr-right.jpg",
                "alt": "Dies ist ein alternativ Text",
                "width": "960",
                "height": "640"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": true
        },
        "content": {
          "captionText": "<p>2x3 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
        },
        "partials": {
          "picture": {
            "viewtypes": {
              "specifier": "picture--original picture--portrait"
            },
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/2x3/eltern-tragen-ihre-kleinen-kinder-auf-den-schultern.jpg",
                "alt": "Dies ist ein alternativ Text",
                "width": "1100",
                "height": "1650"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": true
        },
        "content": {
          "captionText": "<p>1x1 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
        },
        "partials": {
          "viewtypes": {
            "specifier": "picture--original picture--portrait"
          },
          "picture": {
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/1x1/abstimmung-des-verwaltungsrats.jpg",
                "alt": "Dies ist ein alternativ Text",
                "width": "1000",
                "height": "1000"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": true
        },
        "content": {
          "captionText": "<p>36x11 Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
        },
        "partials": {
          "picture": {
            "viewtypes": {
              "specifier": "picture--original picture--landscape"
            },
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/36x11/eltern-baby-tablet-1440x440.jpg",
                "alt": "Dies ist ein alternativ Text",
                "width": "1440",
                "height": "440"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": true
        },
        "content": {
          "captionText": "<p>Mini Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
        },
        "partials": {
          "picture": {
            "viewtypes": {
              "specifier": "picture--original picture--landscape"
            },
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/dummy_200_100.data.png",
                "alt": "Dies ist ein alternativ Text",
                "width": "200",
                "height": "100"
              }
            }
          }
        }
      },
      {
        "switches": {
          "hasFigcaption": true
        },
        "content": {
          "captionText": "<p>Langes Bild: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>"
        },
        "partials": {
          "picture": {
            "viewtypes": {
              "specifier": "picture--original picture--portrait"
            },
            "content": {
              "sources": [],
              "img": {
                "src": "../../images/dummy_100_1000.data.png",
                "alt": "Dies ist ein alternativ Text",
                "width": "100",
                "height": "1000"
              }
            }
          }
        }
      }
    ],
    "arrows": {
      "switches": {
        "hasAriaAttr": true
      },
      "viewtypes": {},
      "content": {
        "ariaAttr": "aria-hidden=\"true\""
      },
      "partials": {}
    }
  }
}

No notes defined.