Carousel

API

Carousel

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.toggleSelector String Selector for toggling element (optional, default '.ecl-carousel__toggle')
  • 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.contentClass String Selector for the content container
  • options.navigationClass String Selector for the navigation container
  • options.containerClass (optional, default '.ecl-carousel__container')
  • options.navigationItemsClass (optional, default '.ecl-carousel__navigation-item')
  • 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.

handleClickOnToggle

Toggles play/pause slides.

resizeTicker

Resize the slides across the width of the container.

handleResize

Trigger events on resize.

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();