IxDF Design System

“Image Slider” Component

Our image slider component is a simple slider implemented with help from Siema Library.

Example

Usage

Template

@include('components.imageSlider', ['images' => [
    ['url' => '/images/01.jpg', 'description' => 'Image #1 description'],
    ['url' => '/images/02.jpg', 'description' => 'Image #2 description'],
]])

JS

import {initImageSliders} from 'modules/imageSlider.js';
const settings = {slideDuration: 300};
initImageSliders(settings);

Props

  • images (required)
    array<int, array{url: string, description: string}>

    A dictionary of elements with URL and description.

  • hideNavOnSmall
    bool

    Changes style on small screen, like hiding nav control.

Settings Object

  • autoplay
    boolean

    Should carousel rotate automatically.

    Default Value: true

  • duration
    number

    Slide animation duration.

    Default Value: 400

  • slideDuration
    number

    Number of ms after which next slide is shown.

    Default Value: 500

  • loop
    boolean

    Should the carousel loop.

    Default Value: true

  • easing
    string

    Easing animation for slider.

    Default Value: ease-out

  • perPage
    number

    The number of slides to be shown.

    Default Value: 1

  • startIndex
    number

    Index of first slide.

    Default Value: 0

  • draggable
    boolean

    Decides whether slides are draggable.

    Default Value: true

  • multipleDrag
    boolean

    Allow dragging to move multiple slides.

    Default Value: true

  • threshold
    number

    Touch and mouse dragging threshold (in px).

    Default Value: 20