Slider JS

Table of content

• Examples
• JS API
  • Slider
  • SliderBtn
  • SliderCount
  • SliderDots
  • SliderDrag
  • SliderItem
  • SliderProgress

Usage

Use the Slider component to display items on a X axis and enable indexed navigation between them.

app.js

import { Base, createApp } from '@studiometa/js-toolkit';
import { Slider } from '@studiometa/ui';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Slider,
    },
  };
}

export default createApp(App);

slider.twig

<div data-component="Slider">
  <div data-ref="wrapper" data-component="SliderDrag" class="flex gap-4">
    {% for item in 1..4 %}
      <div data-component="SliderItem" class="grow-0 shrink-0">
        #{{ item }}
      </div>
    {% endfor %}
  </div>
</div>

By default, the SliderItem and SliderDrag components are included in the Slider. You can add more controls with the following components:

• SliderBtn to add previous and next buttons
• SliderCount to display the current index of the slider
• SliderDots to have a secondary navigation
• SliderProgress to add a progress bar

These components need to be added as child components of the Slider component, so a Slider class must be reimplemented in your project:

Slider.js

import { Base, createApp } from '@studiometa/js-toolkit';
import {
  Slider as SliderCore,
  SliderBtn,
  SliderCount,
  SliderDots,
  SliderDrag,
  SliderItem,
  SliderProgress,
} from '@studiometa/ui';

export class Slider extends SliderCore {
  static config = {
    components: {
      SliderBtn,
      SliderCount,
      SliderDots,
      SliderDrag,
      SliderItem,
      SliderProgress,
    },
  };
}

app.js

import { Base, createApp } from '@studiometa/js-toolkit';
import { Slider } from './Slider.js';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Slider,
    },
  };
}

export default createApp(App);