Carousel & Slideshow

The carousel widget allows organizing items into panels and flipping through them easily, showing only the active panel. The slideshow adds auto-playing and navigation on top of the carousel.

  • carousel: the carousel widget, specified as:
    • element with data-widget="carousel"
  • panel: the panels that contain the various items, specified as one of:
    • elements with role="group"
    • using the data-panels option, specified as a jQuery selector relative to the widget
    • children of the 1st child of the widget if the controls are below the panels
    • children of the 2nd child of the widget
  • item: the individual items in the carousel, specified as one of:
    • elements with role="option"
    • using the data-items option, specified as a jQuery selector relative to the widget
    • children of the panels
  • controls: the controls that allow switching panels, specified as one of:
    • elements with role="toolbar", if the data-controls option is not false
    • children of the 2nd child of the widget if the controls are below the panels
    • children of the 1st child of the widget if the widget has several children
    • auto-generated
  • previous button: the button that allows switching to the previous panel, specified as one of:
    • elements with data-role="previous", if the data-prev option is not false
    • using the data-prev option, specified as a jQuery selector relative to the widget
    • auto-generated
  • next button: the button that allows switching to the next panel, specified as one of:
    • elements with data-role="next", if the data-next option is not false
    • using the data-next option, specified as a jQuery selector relative to the widget
    • auto-generated
  • data-event: what event to respond to (click by default)
  • data-cycleItems: whether to cycle through the items or not (trueor false, default is false)
  • beforeSelect: triggered on the carousel element before the selection happens
  • afterSelect: triggered on the carousel element after the selection happens

Both events have the following parameters:

  • item: a reference to the current item
  • panel: a reference to the current panel

With inline preview

Inline previews for each option can be set, by adding:

  • data-target: jQuery selector to the target element that contains the preview
  • data-url: url to use for the content of the target element (for its src attribute)

With controls

Vertical with controls

With custom controls

With custom controls and cycleItems=True

Slideshow

The slideshow widget structure

  • slideshow: the carousel widget, specified as:
    • element with data-widget="slideshow"
  • panel: same as carousel
  • item: same as carousel
  • controls: same as carousel
  • previous button: same as carousel
  • next button: same as carousel
  • play button: the button that allows auto-playing the items, specified as one of:
    • elements with data-role="play", if the data-play option is not false
    • using the data-play option, specified as a jQuery selector relative to the widget
    • auto-generated
  • pause button: the button that allows pausing the items, specified as one of:
    • elements with data-role="pause", if the data-pause option is not false
    • using the data-pause option, specified as a jQuery selector relative to the widget
    • auto-generated
  • selectors: the selectors that allow jumping to a specific item, specified as one of:
    • elements with data-role="selector"
    • using the data-selectors option, specified as a jQuery selector relative to the widget
    • auto-generated

Options for the slideshow widget

Same as carousel, plus:

  • data-autoplay: whether to auto-play the items (trueor false, default is true)
  • data-duration: how long each item in the slideshow should be shown (in ms, default is 5000)

Events for the slideshow widget

Same as carousel.

Default slideshow

With controls (no selectors)

Slideshow with custom controls