Screens Wall

Customization	Reference
HTML selector	🔧 [data-arts-component-name="ScreensWall"]
Component source	📄 HTML/js/components/ScreensWall.js
Component source (gulp)	📄 SOURCE/components/screensWall/ScreensWall.js

Default Options

defaults: {
  marquee: {
    speed: 0.5,
    onHoverSpeed: 0.5
  }
}

HTML Markup

<section
  class="section section-demo-screens-wall section-fullheight text-center overflow-hidden js-screens-wall"
  data-arts-component-name="ScreensWall"
  data-arts-os-animation="true"
>
  <div class="d-flex justify-content-between section-demo-screens-wall__wrapper-lanes js-screens-wall__list-container">
    <!-- Screens [left lane] -->
    <div class="col-6 col-lg-4 d-flex ms-1 ms-md-2">
      <div class="col-6 h-100 d-flex flex-column js-screens-wall__list-lane">
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
      </div>
      <div class="col-6 h-100 d-flex flex-column js-screens-wall__list-lane" data-arts-infinite-list-options='{ "inverse": true }'>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
      </div>
    </div>
    <!-- - Screens [left lane] -->
    <!-- Screens [right lane] -->
    <div class="col-6 col-lg-4 d-flex me-1 me-md-2">
      <div class="col-6 h-100 d-flex flex-column js-screens-wall__list-lane">
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
      </div>
      <div class="col-6 h-100 d-flex flex-column js-screens-wall__list-lane" data-arts-infinite-list-options='{ "inverse": true }'>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
        <div class="w-100 d-block p-1 p-md-2 js-screens-wall__list-item">
          ...
        </div>
      </div>
    </div>
    <!-- - Screens [right lane] -->
  </div>
</section>