tnt-carousel

Super simple responsive carousel with touch support

Designed to be used with browserify.

There's a huge amount of carousel scripts out there, I'm fully aware of that. But not many carousels work well with percentages, fluid layouts and media queries. This carousel makes it possible to style your carousel like you want. If you want to have 2 slides in view, just style your childs to have a width of 50%. If you want it to only have 1 slide in view on mobile, just style your childs to have a width of 100%. The carousel will adapt accordingly.

Getting started

Install using npm:

$ npm install tnt-carousel

Add it to your Javascript:

var Carousel = require('tnt-carousel');
new Carousel(document.getElementById( 'my-carousel' ), {
    autoplay: true,
    autoplayInterval: 5000
});

Add your HTML markup. Note that you can use any structure you want, as long as it's an element containing childs as slides. Using an unordered list or a section containing multiple articles are also good options.

<div id="my-carousel">
    <div>This is slide #1</div>
    <div>This is slide #2</div>
    <div>This is slide #3</div>
    <div>This is slide #4</div>
    <div>This is slide #5</div>
    <div>This is slide #6</div>
    <div>This is slide #7</div>
</div>

Add some super basic styling to get started. Don't forget to add your transition to the container!

#my-carousel
{
    overflow: hidden;
    position: relative;
    transition: transform .5s;
}
 
#my-carousel div
{
    float: left;
    width: 25%;
    height: 300px;
}
 
.carousel-prev-button,
.carousel-next-button
{
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
}
 
.carousel-prev-button { left: 0; }
.carousel-next-button { right: 0; }

Options

Methods

build

Build the carousel. Gets called automatically upon creating an instance. Useful to rebuild previously destroyed carousels.

var carousel = new Carousel(document.getElementById( 'my-carousel' ));
carousel.destroy();
carousel.build();

destroy

Destroys a carousel after it's been built. This restores the DOM to it's original state.

carousel.destroy();

goTo

Slide to a certain slide

carousel.goTo( 3 );

play

Automatically go from one slide to the other

carousel.play();

pause

Pause the carousel if it's playing

carousel.pause();