slideStrips v1.0

Download .zip Download .tar.gz View on GitHub

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>

Predefined CSS Classes to add to your slideStrip <ul>


You will need to use one of these css classes until you're comfortable enough to create your own. Know that every slide that is visible receives as class of active.

Now our jQuery

This is a very basic fading slideshow.


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.


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"/>