A style-free carousel plugin for jQuery and Boost JS. While other plugins style and arrange your carousel for you, this plugin only handles the functionality, leaving the layout and styling up to you.

Install with npm:

npm install boost-js-carousel

Install in browser:

<script src="https://cdn.rawgit.com/marksmccann/boost-js-carousel/v0.2.0/dist/carousel.min.js"></script>

var boost = require('boost-js');
// var boost = $.fn.boost; (browser install)

var carousel = require('boost-js-carousel');
// var carousel = $.fn.boost.carousel; (browser install)

$.fn.carousel = boost( carousel.plugin, carousel.defaults );

<ol id="carousel">
    <li class="is-active">Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
</ol>
<button data-bind="#carousel" data-role="next">Next</button>
<button data-bind="#carousel" data-role="prev">Previous</button>
<ol data-bind="#carousel" data-role="nav">
    <li class="is-active"></li>
    <li></li>
    <li></li>
</ol>

Note: data-bind is used to link the element to the instance, data-role is used to define the element's role in that instance. See Boost JS for more details.

$('#carousel').carousel();

$('#carousel').carousel({
	onInit: function() {
    	console.log( this.id ); // 'carousel'
    }
});

- or -

<div id="carousel" data-start-after="100">...</div>

Changes the carousel to the specified slide. Slide number starts with '0'. Optional callback function called after opening.

instance.changeTo( 1, function(){
    console.log("The second slide is now active.");
});

Moves the slider to the next slide. In the case it is the last slide, the show starts over.

instance.next();

Moves the slider to the previous slide. In the case it is the first slide, it returns to the last slide.

instance.prev();

Starts the carousel; changing slides at the interval specified in the settings.

instance.start();

Stops the carousel. It will no longer change slides automatically.

instance.start();

Resets the timer for the interval to 0.

instance.reset();

Returns boolean if carousel is running or not.

instance.isRunning();

The number of the next slide relative to the active slide.

instance.nextSlide();

The number of the previous slide relative to the active slide.

instance.prevSlide();

The id of the interval timer being used for the slide show.

instance.intervalTimer;

The index/number of the slide active at any given point.

instance.activeSlide;

An array of jquery objects organized by slide number. Navigation items are grouped with their respective slide.

instance.slides; // [ $([0]:slide1,[1]:nav1), ... ]

$ npm install && npm test

Copyright © 2016, Mark McCann. Released under the MIT license.