Carousel

API

Carousel

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.prevSelector String Selector for prev element (optional, default '.ecl-carousel__prev')
  • options.nextSelector String Selector for next element (optional, default '.ecl-carousel__next')
  • options.slidesClass String Selector for the slides container (optional, default '.ecl-carousel__slides')
  • options.slideClass String Selector for the slide items (optional, default '.ecl-carousel__slide')
  • options.currentSlideClass String Selector for the counter current slide number (optional, default '.ecl-carousel__current')
  • options.toggleSelector String Selector for toggling element
  • options.contentClass String Selector for the content container
  • options.navigationClass String Selector for the navigation container
  • options.playSelector (optional, default '.ecl-carousel__play')
  • options.pauseSelector (optional, default '.ecl-carousel__pause')
  • options.containerClass (optional, default '.ecl-carousel__container')
  • options.navigationItemsClass (optional, default '.ecl-carousel__navigation-item')
  • options.controlsClass (optional, default '.ecl-carousel__controls')
  • options.paginationClass (optional, default '.ecl-carousel__pagination')
  • options.attachClickListener (optional, default true)
  • options.attachResizeListener (optional, default true)

init

Initialise component.

destroy

Destroy component.

dragStart

TouchStart handler.

Parameters

• e Event

dragAction

TouchMove handler.

Parameters

• e Event

dragEnd

TouchEnd handler.

shiftSlide

Action to shift next or previous slide.

Parameters

• dir (int | string)
• stopAutoPlay Boolean

moveSlides

Transition for the slides.

Parameters

• transition Boolean

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.

handleKeyboardOnPlay

Parameters

• e Event

handleKeyboardOnBullets

Parameters

• e Event

handleFocus

Trigger events on focus.

Parameters

• e Event

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

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

Returns Carousel An instance of Carousel.

Setup

There are 2 ways to initialise the component.

Automatic

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

<div class="ecl-carousel" data-ecl-carousel data-ecl-auto-init="Carousel">
  ...
</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-carousel on the page:

var elt = document.querySelector('[data-ecl-carousel]');
var carousel = new ECL.Carousel(elt);
carousel.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-carousel]');
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();