@firstandthird/carousel

Simple carousel

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
08May 24, 2021May 19, 2017Minified + gzip package size for @firstandthird/carousel in KB

Readme

Carousel npm

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.