@e-scape/slider v0.2.5

Slider

Library for creating various sliders and scrolls.

Setup

The library uses custom elements, and to have them registered, you need to import the library into your project like this:

import '@e-scape/slider'

Markup

Your markup will look like this almost every time:

<!-- Mandatory element. Viewport -->
<x-slider>
  <!-- Mandatory element. Scrollable part -->
  <slider-content>
    <!-- 
      Optional element, but required if the slider is sectional or infinite.
    -->
    <slider-item></slider-item>
    <slider-item></slider-item>
    <slider-item></slider-item>
    <slider-item></slider-item>
    <slider-item></slider-item>
  </slider-content>
</x-slider>

Settings

All slider configuration, for convenience, is placed in CSS and responds to any media queries.

x-slider {
  /* 
    Slider type. 

    Default is 'slide'.
  */
  --type: slide | morph;

  /* 
    Distance between slides. 

    Works only if --type: slide.

    Value can be a number or CSS unit (10vw, 10vh, 10px...).

    Default is 0.
  */
  --gap: number | CSS unit;

  /* 
    Automatic scrolling.

    If the slider scrolls freely, 
    the value specified in this parameter is added every frame.
    If the slider is sectional, a transition to the next slide will occur 
    after the specified number of milliseconds.

    Default is 0.
  */
  --autoplay: number;

  /*
    Scroll smoothness.

    Works only if --type: slide.

    Default is 0.01.
  */
  --damping: number;

  /*
    Makes the slider infinite.

    <slider-item> elements must be present in the markup.

    Default is false.
  */
  --carousel: boolean;

  /*
    Scroll direction. 

    Works only if --type: slide.

    Default is 'x'.
  */
  --axis: x | y;

  /*
    Sectional scrolling. 

    Works only if --type: slide.

    Default is false.
  */
  --snap: boolean;

  /*
    Automatic slide size.

    Works only if --type: slide.

    Default is false.
  */
  --autoFill: boolean;

  /*
    Number of visible slides.

    Complements the previous parameter.

    Works only if --type: slide.

    Default is 1.
  */
  --itemsInView: number;

  /*
    Gesture control.

    Default is false.
  */
  --drag: boolean;

  /*
    Gesture acceleration.

    Default is 1.
  */
  --dragMult: number;

  /*
    Mouse wheel control.

    Default is false.
  */
  --wheel: boolean;

  /*
    Mouse wheel acceleration.

    Default is 1.
  */
  --wheelMult: number;

  /*
    Keyboard control.

    Default is false.
  */
  --keys: boolean;
}

Public API

TODO

import '@e-scape/slider'
import { SliderElement } from '@e-scape/slider'

const element = document.querySelector<SliderElement>('x-slider')!

element.progress
element.direction
element.speed
element.isRunning
element.directionSize
element.directionScrollSize
element.directionScrollLimit
element.isDisabled
element.disable()
element.enable()
element.range(0, 1, 0)
element.curve(0, 1, 0)
element.visible(0, 1, 0)
element.setPosition(100, 'instant' | 'smooth')
element.shiftPosition(100, 'instant' | 'smooth')
element.setCounter(3, 'instant' | 'smooth')
element.shiftCounter(1, 'instant' | 'smooth')
const unsubscribe = element.onPosition(({ current, previous }) => {})