Components

News ticker

API

NewsTicker

Parameters

  • element HTMLElement DOM element for component instantiation and scope

  • options Object (optional, default {})

    • options.prevSelector String Selector for prev element (optional, default '[data-ecl-news-ticker-prev]')
    • options.nextSelector String Selector for next element (optional, default '[data-ecl-news-ticker-next]')
    • options.contentClass String Selector for the content container (optional, default '.ecl-news-ticker__content')
    • options.slidesClass String Selector for the slides container (optional, default '.ecl-news-ticker__slides')
    • options.slideClass String Selector for the slide items (optional, default '.ecl-news-ticker__slide')
    • options.currentSlideClass String Selector for the counter current slide number (optional, default '.ecl-news-ticker__counter--current')
    • options.toggleSelector String Selector for toggling element
    • options.playSelector (optional, default '[data-ecl-news-ticker-play]')
    • options.pauseSelector (optional, default '[data-ecl-news-ticker-pause]')
    • options.containerClass (optional, default '.ecl-news-ticker__container')
    • options.controlsClass (optional, default '.ecl-news-ticker__controls')
    • options.attachClickListener (optional, default true)
    • options.attachResizeListener (optional, default true)

init

Initialise component.

destroy

Destroy component.

shiftSlide

Action to shift next or previous slide.

Parameters

moveSlides

Transition for the slides.

Parameters

checkIndex

Action to update slides index and position.

handleAutoPlay

Toggles play/pause slides.

handleMouseOver

Trigger events on mouseover.

handleMouseOut

Trigger events on mouseout.

handleResize

Trigger events on resize.

handleFocus

Trigger events on focus.

Parameters

autoInit

Parameters

  • root HTMLElement DOM element for component instantiation and scope

  • $1 Object (optional, default {})

    • $1.NEWS_TICKER (optional, default {})

Returns NewsTicker An instance of News ticker.

Setup

There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init="NewsTicker" attribute to component's markup:

<div
  class="ecl-news-ticker"
  data-ecl-news-ticker
  data-ecl-auto-init="NewsTicker"
>
  ...
</div>

Use the ECL library's autoInit() (ECL.autoInit()) when your page is ready or other custom event you want to hook onto.

Manual

Get target element, create an instance and invoke init().

Given you have 1 element with an attribute data-ecl-news-ticker on the page:

var elt = document.querySelector('[data-ecl-news-ticker]');
var newsTicker = new ECL.NewsTicker(elt);
newsTicker.init();

Retrieve an existing instance

If an existing instance needs to be updated, it can be retrieved this way:

var elt = document.querySelector('[data-ecl-news-ticker]');
var instance = ECL.components.get(elt);

To update an existing instance, you can run destroy() and init() on this instance, like this:

instance.destroy();
instance.init();