Front W - Pattern Library

Image Slider 

<section class="reel reel--logos" data-controller="reel">
    <div class="reel__gallery" data-reel-target="gallery" tabindex="0" describedby="reel-instructions">
        <div data-reel-target="item">
            <picture class="mb--sm">

                <img src="/placeholder/1400x600.png" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Testbild" decoding="async" class="img-fluid" width=210 height=210>
                <img src="" alt="" class="img--fluid">
            </picture>
        </div>
        <div data-reel-target="item">
            <picture class="mb--sm">

                <img src="/placeholder/1400x600.png" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Testbild" decoding="async" class="img-fluid" width=210 height=210>
                <img src="" alt="" class="img--fluid">
            </picture>
        </div>
        <div data-reel-target="item">
            <picture class="mb--sm">

                <img src="/placeholder/1400x600.png" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Testbild" decoding="async" class="img-fluid" width=210 height=210>
                <img src="" alt="" class="img--fluid">
            </picture>
        </div>
        <div data-reel-target="item">
            <picture class="mb--sm">

                <img src="/placeholder/1400x600.png" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Testbild" decoding="async" class="img-fluid" width=210 height=210>
                <img src="" alt="" class="img--fluid">
            </picture>
        </div>
        <div data-reel-target="item">
            <picture class="mb--sm">

                <img src="/placeholder/1400x600.png" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Testbild" decoding="async" class="img-fluid" width=210 height=210>
                <img src="" alt="" class="img--fluid">
            </picture>
        </div>
        <div data-reel-target="item">
            <picture class="mb--sm">

                <img src="/placeholder/1400x600.png" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Testbild" decoding="async" class="img-fluid" width=210 height=210>
                <img src="" alt="" class="img--fluid">
            </picture>
        </div>

    </div>
    <div class="reel__instructions" id="reel-instructions">
        <p class="reel__instruction reel__instruction--touch">Wischen um mehr zu sehen</p>
        <p class="reel__instruction reel__instruction--hover">Scrollen um mehr zu sehen</p>
        <p class="reel__instruction reel__instruction--focus">Pfeiltasten benutzen zur Navigation</p>
        <p class="reel__instruction reel__instruction--hover-and-focus">Scrollen oder Pfeiltasten zur Navigation benutzen</p>
    </div>
    <ul aria-label="gallery controls" class="reel__controls" data-reel-target="controls">
        <li>
            <button type="button" class="btn" aria-label="previous" data-action="click->reel#previous">
                <svg class="icon" aria-hidden="true" focusable="false" width="16" height="16">
                    <use xlink:href="/assets/icons.svg#i-arrow_left" />
                </svg>
            </button>
        </li>
        <li>
            <button type="button" class="btn" aria-label="next" data-action="click->reel#next">
                <svg class="icon" aria-hidden="true" focusable="false" width="16" height="16">
                    <use xlink:href="/assets/icons.svg#i-arrow_right" />
                </svg>
            </button>
        </li>
    </ul>
</section>
 
{% set reelContent %}
  {% for image in images %}
  <div data-reel-target="item">
    <picture class="mb--sm">
      {% include "@image" %}
      <img src="" alt="" class="img--fluid">
    </picture>
  </div>
  {% endfor %}
{% endset %}

{% include "@reel" with {
  content: reelContent,
  controls: true,
  modifier: 'logos'
} %}
 
{
  "images": [
    {
      "url": "/placeholder/600x400.png",
      "alt": "Testbild"
    },
    {
      "url": "/placeholder/600x400.png",
      "alt": "Testbild"
    },
    {
      "url": "/placeholder/600x400.png",
      "alt": "Testbild"
    },
    {
      "url": "/placeholder/600x400.png",
      "alt": "Testbild"
    },
    {
      "url": "/placeholder/600x400.png",
      "alt": "Testbild"
    },
    {
      "url": "/placeholder/600x400.png",
      "alt": "Testbild"
    }
  ]
}