HTML-Prototype von Hochschule RheinMain

<insert-markup>4.4.4-</insert-markup>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Markup: templates/output/06-components/slider/slider-gallery.html

<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c41106" data-scrollspysection="1">
  <div class="container">
    <div class="c-slider c-slider--gallery">
      <section class="splide c-slider__section" aria-label="Image-gallery Slider">
        <div class="c-slider__track splide__track">
          <ul class="c-slider__list splide__list">
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x487" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x487" width="650" height="487" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/750x450" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/750x450" width="750" height="450" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
            <li class="c-slider__slide splide__slide">
              <figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
                <figure class="image-caption">
                  <p>Bildunterschrift: Beschreibung des Bildinhalts</p>
                  <div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
                    <details>
                      <summary>
                        <div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
                      </summary>
                      <section class="image-caption__section">
                        <header><span class="h5">Fotodaten</span>
                          <button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
                            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
                              <use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
                            </svg>
                          </button>
                        </header>
                        <div class="table-rwd">
                          <div class="table-rwd__overflow">
                            <table class="image-caption__metadata-table">
                              <tbody>
                                <tr>
                                  <th scope="row">Künstler</th>
                                  <td>Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">xmp.photoshop:Headline</th>
                                  <td>Bildmaterial Hochschule RheinMain</td>
                                </tr>
                                <tr></tr>
                                <tr>
                                  <th scope="row">xmp.xmpRights:Marked</th>
                                  <td>true</td>
                                </tr>
                                <tr>
                                  <th scope="row">Copyright</th>
                                  <td>© Andreas Schlote</td>
                                </tr>
                                <tr>
                                  <th scope="row">Nutzungsbedingungen</th>
                                  <td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </section>
                    </details>
                  </div>
                </figure>
              </figure>
            </li>
          </ul>
        </div>
        <div class="c-slider__buttons splide__arrows container">
          <button class="c-slider__button c-slider__arrow c-slider__button--prev splide__arrow splide__arrow--prev" type="button">
                  <svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                    <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-left"></use>
                  </svg>
          </button>
          <button class="c-slider__button c-slider__arrow c-slider__button--next splide__arrow splide__arrow--next" type="button">
                  <svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                    <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-right"></use>
                  </svg>
          </button>
        </div>
      </section>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.slider.scss, line 36
Künstler	Andreas Schlote
xmp.photoshop:Headline	Bildmaterial Hochschule RheinMain
xmp.xmpRights:Marked	true
Copyright	© Andreas Schlote
Nutzungsbedingungen	Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto! Nutzungshinweise Kontakt Hochschulkommunikation
Slider gallery
