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.