slideStrips

Before we start

Your basic HTML markup:

<ul id="flower2" class="slide-strip">
    <li><img src="images/flower1.jpg"/></li>
    <li><img src="images/flower2.jpg"/></li>
    <li><img src="images/flower3.jpg"/></li>
    <li><img src="images/flower4.jpg"/></li>
</ul>

Predefined CSS Classes to add to your slideStrip <ul>

.fade-strip

.slide-strip

Now our jQuery

$('#flower').slideStrip({controls:'add'});

The controls:'add' tells the script that you don't have a predefined element to put controls in, and it should 'add' an element and place controls there.

• 
  This copy is controlled throught css.
• 
  The only thing thats changed is the addition of the .active class
• 
• 

A simple sliding slideshow w/ a break point at 400px

$('#flower2').slideStrip({controls:'add', slide:true});

A Fading slideshow w/ next & previous controls.

$('#flower3').slideStrip({autoPlay:false});

$('#prev').click(function(){
    $('#flower3').trigger('previousSlide');
});

$('#next').click(function(){
    $('#flower3').trigger('nextSlide');
});

A simple sliding slideshow w/ lazy loading images (I made the low resolution images, black and white to better show how this works). This only requires you to provide 2 images for a slide to use it. You can pick and choose which slides receive this capability, by choosing to include a ref image.

$('#flower4').slideStrip({controls:'add', slide:true});

<img ref="images/flower1.jpg" src="images/flower1_low.jpg"/>