###bose.slider.js ####Bose - jQuery DIV background Slider
Slider doesn't require any css. Controls in below is completely external and slider can suite into any container and image will auto fit! Good luck.
- div or element background slider
- can fit to any container whatever the image size is
- external controls
- play, pause, next, prev controls
- numeric pagination
- thumbnail pagination with text and description
- able to preload images into broswer cache
- callbacks
- need more? email to me@habibhadi.com
<script src="bose.slider.min.js">http://habibhadi.com/demo/jquery-div-background-slider/
$("selector").bose({
images : [ "imagePath_1", "imagePath_2", "imagePath_3"]
});###External Controls
$('.play').click(function(){
$(".bose").bose('play');
});
$('.pause').click(function(){
$(".bose").bose('pause');
});
$('.previous').click(function(){
$(".bose").bose('previous');
});
$('.next').click(function(){
$(".bose").bose('next');
});###Options:
images : [ "http://lorempixel.com/960/500/sports", "http://lorempixel.com/960/500/fashion", "http://lorempixel.com/960/500/nature"],
imageTitles : [
['Title 1', 'Description one here'],
['Title 2', 'Description two here'],
['Title 3', 'Description three here']
],
wrapClass : '',
sliderClass : '',
holderClass : '',
startIndex : 0,
transition : 'fade',
timeout : 5, // 5 sec
duration : 2, // 2 sec
pagination : { show : boolean(true/false), container : selector, text : boolean(true/false) },
thumbs : { show : boolean(true/false), container : selector, dimension : { width : 100, height: 60 }, text : boolean(true/false) },
onComplete : function() {},
onSlideStart : function() {},
onSlideEnd : function() {},
onPause : function() {},
autofit : true // if false then background image will be cover