@firstandthird/carousel

Carousel

Simple Carousel.

Installation

npm install @firstandthird/carousel

Module Options

Option	Type	Default	Description
autoslide	{Number}	0	Disabled by default. Number of milliseconds to autoslide to next one
match	{String}	-	Media query on which the carousel shouldn't work with touch events. Useful if you want to disable touch events on tablets
transformsEnabled	{Boolean}	false	By default, slides won't have a transform animation. If this is true they'll have a transform applied to them whenever the page is changed
transformOn	{String}	-	This overwrites the above an only enables transform on a given media query

Methods

play()

Starts autosliding the carousel.

pause()

Stops the carousel.

goToPage(index)

Navigates the carousel to a given slide. Needs parameter index (1 based).

Parameters

index - {Number} - Slide index

goPrev()

Allows an element (preferably a button) to go to the previous slide once clicked (if possible).

goNext()

Allows an element (preferably a button) to go to the next slide once clicked (if possible).

Events

A custom event carousel:slide:change is fired on every slide change.

Example markup

<section class="carousel" data-module="Carousel" data-module-autoslide="4000">
  <div data-carousel-slides>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
  </div>

  ... content

  <div data-carousel-slides>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
  </div>


  <ul class="carousel-controls">
    <li><button class="carousel-control" data-action="changeSlide" data-action-index="1" aria-selected="true"></button></li>
    <li><button class="carousel-control" data-action="changeSlide" data-action-index="2" aria-selected="false"></button></li>
    <li><button class="carousel-control" data-action="changeSlide" data-action-index="3" aria-selected="false"></button></li>
    <li><button class="carousel-control" data-action="changeSlide" data-action-index="4" aria-selected="false"></button></li>
  </ul>
</section>

There are more examples here.