Front W - Pattern Library

Reel: Default 

<section class="reel" data-controller="reel">
    <div class="reel__gallery" data-reel-target="gallery" tabindex="0" describedby="reel-instructions">

        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">1</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">2</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">3</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">4</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">5</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">6</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">7</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">8</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">9</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">10</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">11</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">12</div>
        <div class="box" data-reel-target="item" style="min-width: 200px; text-align: center;">13</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>
</section>
 
<section class="reel{{ modifier is defined ? ' reel--' ~ modifier }}" data-controller="reel">
  <div class="reel__gallery" data-reel-target="gallery" tabindex="0" describedby="{{ id }}-instructions">
    {{ content|raw }}
  </div>
  <div class="reel__instructions" id="{{ id }}-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>
  {% if controls %}
  <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">
        {% include '@icon' with { 'type': 'i-arrow_left' } %}
      </button>
    </li>
    <li>
      <button type="button" class="btn" aria-label="next" data-action="click->reel#next">
        {% include '@icon' with { 'type': 'i-arrow_right' } %}
      </button>
    </li>
  </ul>
  {% endif %}
</section>
 
{
  "id": "reel",
  "content": "\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">1</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">2</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">3</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">4</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">5</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">6</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">7</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">8</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">9</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">10</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">11</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">12</div>\n      <div class=\"box\" data-reel-target=\"item\" style=\"min-width: 200px; text-align: center;\">13</div>\n    "
}