Yet another responsive slider for any kind of content.
JumboSlider is a light and responsive jQuery plugin that provides a simple way to transform any kind of content on any web page into a compact and beautiful slideshow. It's easy to setup with the given options and it's also a great module to interact with due to its methods and callback events.
You can download the plugin as an archive.
Or you can grab it by using npm:
npm install jumboslider
Or you can grab it by using Bower:
bower install jumboslider
Include the script after the jQuery library (unless you package scripts otherwise):
<script src="/path/to/jumboslider.min.js"></script>
Also include the stylesheet for the plugin:
<link type="text/css" rel="stylesheet" href="/path/to/jumboslider.min.css">
Firstable, you need to have a proper markup:
<div class="jumboslider">
<div class="jumboslider-viewport">
<div class="jumboslider-overview">
<div class="jumboslider-item">
<!-- content of your choice -->
</div>
<div class="jumboslider-item">
<!-- content of your choice -->
</div>
<div class="jumboslider-item">
<!-- content of your choice -->
</div>
<div class="jumboslider-item">
<!-- content of your choice -->
</div>
</div>
</div>
</div>
Now, there are two ways of initializing JumboSlider.
The first way is as follows:
$.jumboslider(); // returns the target
This is the most basic initialization. By calling it so, the plugin will look for any element that has a "jumboslider" class. If no such elements, nothing will happen.
Of course, you can also provide specific target/s with a custom selector by doing so:
$.jumboslider({
target: $('selector')
});
The second way is as an object method. So, we can also use the plugin this way:
$('selector').jumboslider(); // returns the target
Defines a custom target selector.
The target property is only available when initialize JumboSlider as a jQuery function like the example below.
$.jumboslider({
target: $('selector')
});
Default value: $('.jumboslider')
Defines which item will be the first one to be shown.
$.jumboslider({
startPosition: 1
});
Type: number
Default value: 1
Defines whether or not graphic arrows should be shown
$.jumboslider({
arrows: true
});
Type: boolean
Default value: true
Defines whether or not a pagination should be shown
$.jumboslider({
pagination: true
});
Type: boolean
Default value: true
Defines the speed of the transition between slides (in milliseconds).
$.jumboslider({
transition: 200
});
Type: number
Default value: 500
Defines whether or not the JumboSlider should be able to start over from the first item after it reaches to the last one and also to jump back to the last item right from the first one.
$.jumboslider({
loop: false
});
Type: boolean
Default value: false
Defines whether or not the JumboSlider should runs automatically by providing a lifetime duration for the slides (in milliseconds). The default duration is 0
which means the autoplay is off.
$.jumboslider({
autoplay: 3000
});
Type: number
Default value: 0
There are two ways of binding JumboSlider events.
1. As option properties:
$('selector').jumboslider({
onSlide: function(e, target) {
// do something
}
});
2. As jQuery events:
$('selector').jumboslider().bind('onSlide', function(e, target) {
// do something
});
And here are all available events:
Triggers when a slide transition is being fired.
var slider = $('selector').jumboslider();
slider.bind('onSlide', function(e, target) {
// do something
});
Triggers when a graphic arrow controller is being used.
var slider = $('selector').jumboslider();
slider.bind('onArrowClick', function(e, target) {
// do something
});
Triggers when a pagination controller is being used.
var slider = $('selector').jumboslider();
slider.bind('onPaginationClick', function(e, target) {
// do something
});
Slides to the next item (if any).
var slider = $('selector').jumboslider();
slider.slideNext();
Slides to the previous item (if any).
var slider = $('selector').jumboslider();
slider.slidePrev();
Slides to a specific item.
var slider = $('selector').jumboslider();
slider.slideTo(5); // will slide to the fifth item
- Apple Safari
- Google Chrome
- Microsoft Internet Explorer 9+
- Mozilla Firefox
- Opera
Copyright © 2017 Martin Metodiev. Licensed under the MIT license. See here for more details.