SloganTicker

SloganTicker

new SloganTicker(element, options)

Source:
Parameters:
Name Type Description
element HTMLElement

DOM element for component instantiation and scope

options Object
Properties
Name Type Description
sliderSelector String

Selector for the slider element

playSelector String

Selector for the play button

pauseSelector String

Selector for the pause button

slideClass String

Selector for the slide items

autoplaySelector String

Selector for autoplay state (data attribute with boolean value)

autoScrollSpeed Number

Speed value for embla auto scroll plugin

attachClickListener Boolean

Whether to attach click listeners

attachResizeListener Boolean

Whether to attach resize listener

Classes

SloganTicker

Methods

destroy()

Description:
  • Destroy the component: remove listeners, cancel RAF, destroy slider and cleanup DOM attributes.

Source:

ensureEnoughContent()

Description:
  • For the loop to work properly we need a decent amount of items

Source:

handleResize()

Description:
  • Handle window resize: debounce re-initialisation of the slider and restart auto-scroll.

Source:

init() → {SloganTicker|false}

Description:
  • Initialise component: query DOM nodes, initialise slider and bind events.

Source:
Returns:

this instance or false if not initialised

Type
SloganTicker | false

initSlider()

Description:
  • Initialise the Embla slider instance and attach the auto-scroll plugin.

Source:

setupVisibilityObserver()

Description:
  • Stop the slider auto-scroll when the component is not visible in the viewport, and resume when it is visible again.

Source:

startAutoScroll()

Description:
  • Start the auto-scroll behaviour and update buttons visibility.

Source:

stopAutoScroll()

Description:
  • Stop the auto-scroll behaviour and update buttons visibility.

Source:

toggleAutoScroll(eventopt)

Description:
  • Toggle the auto-scroll state (play / pause).

Source:
Parameters:
Name Type Attributes Description
event Event <optional>

Click event that triggered the toggle

updateButtonVisibility()

Description:
  • Update visibility of play and pause buttons according to isPlaying.

Source:

(static) autoInit(root) → {SloganTicker}

Source:
Parameters:
Name Type Description
root HTMLElement

DOM element for component instantiation and scope

Returns:

An instance of SloganTicker.

Type
SloganTicker