Horizontal Scroll

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

Default Options

defaults: {
  mode: 'modular',
  toggleInViewClass: 'in-view',
  matchMedia: '(min-width: 992px) and (hover: hover) and (pointer: fine)',
  toggleHeaderVisibility: true,
  lockHeaderSticky: false
}

HTML Markup

<section
  class="js-horizontal-scroll"
  data-arts-component-name="HorizontalScroll"
  data-arts-component-options="{}"
  data-arts-os-animation="true"
>
  <div class="js-horizontal-scroll__wrapper">
    <!-- HS column #1 -->
    <div class="hs-col-auto col-xxl-4 col-md-6 col-12 horizontal-scroll__section js-horizontal-scroll__section">
      ...
    </div>
    <!-- HS column #2 -->
    <div class="hs-col-auto col-xxl-4 col-md-6 col-12 horizontal-scroll__section js-horizontal-scroll__section">
      ...
    </div>
    <!-- HS column #3 -->
    <div class="hs-col-auto col-xxl-4 col-md-6 col-12 horizontal-scroll__section js-horizontal-scroll__section">
      ...
    </div>
  </div>
</section>