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

Option | Type | Default | Description ------ | ---- | ------- | ----------- activeSlideClass | string | active | The currently active slide will have this class assigned arrowButtons | boolean | true | Whether or not to automatically add a previous and next button arrowButtonsContainer | Element | null | The HTML Element to append the arrow buttons to autoplay | boolean | false | Whether or not to automatically start playing once the carousel is built autoplayInterval | int | 4000 | The time interval (in milliseconds) between each slide edgeFriction | number | 0.1 | Determines the distance (width of slide * edgeFriction) to swipe before it is registered as a request to a new slide. A value between 0.1 and 0.3 feels natural. inactiveArrowClass | string | hide | If option arrowButtons is set to true, the inactive arrows will have this class assigned keyEvents | boolean | false | Wheter or not to use keyboard events loadedClass | string | loaded | When the carousel is built it will have this class assigned mouseSwipe | boolean | true | Whether or not to use mouse events for swiping nextArrowClass | string | carousel-next-button | If option arrowButtons is set to true, the next arrow will have this class assigned previousArrowClass | string | carousel-prev-button | If option arrowButtons is set to true, the previous arrow will have this class assigned touchSwipe | boolean | true | Whether or not to use touch events for swiping

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