FlexStrip

Settings:

• mode (String, default: "free")

  This setting controls the behavior of the control. Possible values are:

  1. "free" - The free mode allows the most flexibility, and the control can be positioned as required, within container bounds.
  2. "slide" - The slide mode is intended for slides of unequal size. The control will always be positioned at one of the snap points
  3. "page" - The page mode is intended for slides that are all equal to thhe size of the container, and can therefore be viewed only one at a time.

• vertical (Boolean, default: false)

  Toggles the orientation of the control to vertical

• mouseDraggable (Boolean, default: true)

  If set to true, the control can be moved by pressing and dragging the mouse, regardless of other settings. The motion is still constrained with respect to other settings.

• mouseScrollable (Boolean, default: true)

  If set to true, the control will listen to mousewheel events and will reposition itself in response to the scroll.

• snapToItems (Boolean, default: false)

  If set to true, the control will snap to child item edges when dragging.

• snapDistance (Number, default: 35)

  The maximum distance from the item edge to the start of control for snap to activate.

• forceSnapPoints (Boolean, default: false)

  If set to true, the control will only stop at snap points.

• autoScroll (Boolean, default: false)

  If true and the control exceeds available space, the control will be moved automatically relative to the position of mouse moving above the control.

• extraLength (Number, default: 0)

  Specifies the amount of extra space to reserve at both sides of the strip; useful in autoScroll mode

• dropOnMouseOut (Boolean, default: true)

  If true, the dragging will stop if the mouse exits the control area on the page. If false, the dragging will continue until the mouse is released, regardless of its position relative to the control.

• globalKeyReact (Boolean, default: false)

  By default, the control reacts to the arrow keyboard presses (LEFT/RIGHT for horizontal orientation, and UP/DOWN for vertical) when the mouse is above it. If this setting is true, it will react to these key events regardless of where the current mouse position.

• scrollOnClick (Boolean, default: false)

  If true, the control will automatically scroll to the slide that was clicked.

• arrowsOnHover (Boolean, default: false)

  If set to true and the control exceeds the size of the container, it will display the paging arrows when the mouse is the range of the control.

• animDuration (Number, default: 400)

  The duration, in milliseconds, of slide scrolling animations.

• center (Boolean, default: false)

  If set to true and the control is shorter that the container, it will be centered within the container.

• stretch (Boolean, default: false)

  If set to true and the control is shorter that the container, it will be stretched to fill the container.

• distribute (String, default: null)

  If this value is used, the control will ensure all slides have the same sizes. There are three possible values:

  1. "largest" - The size of all slides will be set to the size of the largest slide.
  2. "smallest" - The size of all slides will be set to the size of the smallest slide.
  3. "contain" - The available space is divided by the number of slides, and each slide is assigned that size.