A style-free and accessible 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>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ol>
<a href="#carousel" data-role="next">Next</a>
<a href="#carousel" data-role="prev">Previous</a>
<ol data-bind="#carousel" data-role="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
Note: data-bind
and href
are 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();
Name | Default | Description |
---|---|---|
activeClass | "is-active" |
the class added to slide and nav indicator when active |
nextClass | "is-next" |
the class added to slide and nav indicator when on deck |
prevClass | "is-prev" |
the class added to slide and nav indicator when was just active |
intervalSpeed | 5000 |
time between slides in milliseconds |
startAfter | 0 |
interval before starting show, set to -1 to prevent start |
startOnSlide | 0 |
starts the slide show on this slide # |
pauseOnHover | true |
stops the show while cursor hovers over source element |
resetInterval | true |
resets time between slides after a change |
onChange | null |
a callback function called when slides change |
onInit | null |
a callback function called when plugin is initialized |
$('#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 changing.
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, it 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 — changes slides at the interval specified in the settings.
instance.start();
Stops the carousel — no longer changing slides automatically at interval.
instance.stop();
Resets the timer for the interval to 0.
instance.reset();
Returns boolean if carousel is running or not.
instance.isRunning(); // true || false
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.