- Fully Responsive
- Allow all styling to happen through CSS
- Work well on mobile
- Use as little JavaScript as possible. (working on losing the jQuery dependency)
Basic form:
$('#slides').slideStrip();Sliding + adding controls:
$('#slides').slideStrip({controls:'add', slide:true});Lazy Loading:
If your images include a ref property, the slideStrip will compare that to the current image src and load a new image if it needs to. The src and ref image files should be of the same aspect ratio.
<ul class="slide-strip">
<li><img ref="/images/image1.jpg" src="/images/image1_low.jpg"></li>Paramaters:
start : 0, // slide to start on
pause : 5, // time in seconds between slides
autoPlay : true, // should it play automatically?
slide : false, // does this slide from left to right?
touch : true, // allow for mouse and touch events?
controls : null, // #id of container to place controls, or 'add' to automagicly create.
trueFit : true, // should I avoid showing empty white space?
slingBack : false, // if I go to far should I stop or slide all the way back.
threshold : 30, //
fallBacks : { // fallbacks for ie8 & 9
fadeTime:0.5,
slideTime:0.5
},
onSlideChange:function(){} // event that fires when the slide changes.Events:
$('#who').trigger('loadSlide', number); // number = the slide to load
$('#who').trigger('play', pause); // pause = boolean;
$('#who').trigger('nextSlide'); // causes the slideStrip to advance
$('#who').trigger('previousSlide'); // causes the slideStrip to go back