Glider JS Settings Per Instance

Problem/Motivation

We’ll need to support multiple instances of the slider per page that may require different settings. For instance some sliders may have different slidesToShow values and some may have different arrow or dots settings, but they will coexist on the same page together.

I have vetted available settings and laid out how each should behave here in the admin form as well as the template.

slidesToShow

Form element: select

Values: auto, 1-10

Default: 1

Form behavior: If auto is selected, then the itemWidth and exactWidth options should display.

slidesToScroll

Form element: select

Default: 1

Values: auto, 1-10

arrows

Form element: checkbox

Values: true/false

Default: true

Template behavior: value should be passed to Twig so that the arrows markup can be conditionally rendered based on this value.

dots

Form element: checkbox

Values: true/false

Default: false

Template behavior: value should be passed to Twig so that the dots markup can be conditionally rendered based on this value.

itemWidth

Form element: number input

Values: 1-9999

Form behavior: should only appear if slidesToShow value is set to “auto”

exactWidth

Form element: number input

Values: 1-9999

Form behavior: should only appear if slidesToShow value is set to “auto”

scrollLock

Form element: checkbox

Value: true/false

Form behavior: when checked, display scrollLockDelay

scrollLockDelay

Form element: number input

Value: 1-99999

Default: 250

Form behavior: should only appear if scrollLock is checked

resizeLock

Form element: checkbox

Values: true/false

Default: true

responsive

This should be a multi-select that reads the theme breakpoints and adds new forms with all of these settings when each breakpoint is selected.

rewind

Form element: checkbox

Values: true/false

Default: false

draggable

Form element: checkbox

Values: true/false

Defaultl: false

Form behavior: when this is checked, display dragVelocity settings

dragVelocity

Form element: number input with step 0.1

Values: 1-10

Default: 3.3

Form behavior: should only appear if draggable is checked

duration

Form element: number input with step of 0.1

Values: 0-1

Default: 0.5

We can either omit the following settings, or hide them by default in some kind of dropdown.

scrollPropogate

Form element: checkbox

Values: true/false

Default: false

eventPropagate

Form element: checkox

Values: true/false

Default: true

skipTrack

Form element: checkbox

Values: true/false

Default: false

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes