Front W - Pattern Library

Image Gallery 

<div class="stack">
    <div id="image-gallery" class="carousel carousel--no-scroll" data-controller="carousel">
        <div class="carousel__inner" data-carousel-target="inner">
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
            <div class="carousel__item" data-carousel-target="slide">
                <figure class="figure">
                    <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

                    <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
                </figure>
            </div>
        </div>
    </div>

    <div class="cluster cluster--thumbnails">
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="0" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="1" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="2" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="3" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="4" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="5" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="6" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="7" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="8" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="9" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
        <a href="#image-gallery" data-target="#image-gallery" data-slide-to="10" class="thumbnail">
            <picture>
                <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
            </picture>
        </a>
    </div>
</div>
 
<div class="stack">
  <div id="{{ id }}" class="carousel carousel--no-scroll" data-controller="carousel">
    <div class="carousel__inner" data-carousel-target="inner">
      {% for i in 0..10 %}
      <div class="carousel__item" data-carousel-target="slide">
        <figure class="figure">
          <img src="/placeholder/800x600.jpg" width="800" height="600" alt="Prof. Dr. Anne Christin Kemper" class="img-fluid">

          <figcaption class="figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam enim, vel eum inventore consectetur minus fugiat illo nisi asperiores eaque est sint dicta. Praesentium itaque ut rerum ipsa, repellat non?</figcaption>
        </figure>
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="cluster cluster--thumbnails">
    {% for i in 0..10 %}
      <a href="#{{ id }}" data-target="#{{ id }}" data-slide-to="{{ i }}" class="thumbnail">
        <picture>
          <img src="/placeholder/400x400.jpg" alt="Prof. Dr. Anne Christin Kemper" width="80" height="80" class="img-fluid">
        </picture>
      </a>
  {% endfor %}
  </div>
</div>
 
{
  "id": "image-gallery"
}