Slider Images

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

Default Options

const defaults = {
  drag: {
    label: 'Drag',
    arrowsDistance: 50,
    scale: 1.5,
    hideNative: true,
    toggleClass: 'infinite-list_mouse-drag',
    color: 'var(--ui-element-color-light-theme)',
    background: 'var(--color-accent-dark-theme)',
  },
  preventScroll: false,
  direction: 'horizontal',
  scroll: app.options.virtualScroll,
  loop: true,
  autoCenterFirstItem: true,
  type: 'touch,pointer',
  toggleScrollingClass: 'infinite-list_scrolling',
  toggleDraggingClass: 'infinite-list_dragging',
  togglePressedClass: 'infinite-list_pressed',
  snapOnRelease: {
    keyboard: false,
    toggleActiveItemClass: 'active',
    removeActiveClassOnInteraction: false
  },
  marquee: {
    speed: 0.3,
    onHoverSpeed: 0
  },
  currentClass: 'current'
};

HTML Markup

<div
  class="slider-images infinite-list js-slider-images"
  data-arts-component-name="SliderImages"
  data-arts-component-options="{}"
>
  <div class="slider-images__lane js-slider-images__lane">
    <!-- Slide #1 -->
    <div class="slider-images__item js-slider-images__item">
      ...
    </div>
    <!-- Slide #2 -->
    <div class="slider-images__item js-slider-images__item">
      ...
    </div>
    <!-- Slide #3 -->
    <div class="slider-images__item js-slider-images__item">
      ...
    </div>
  </div>
  <div class="arts-is-dragging__blocker"></div>
</div>