simpleSli.de: A Super-Simple jQuery Slideshow Plugin

a jQuery slideshow plugin

it's easy

The package is based around the way you already build your website, so you don’t have to retain swaths of arbitrary knowledge to use it on a regular basis.

it's small

At 15kB for the full version, and a minute 6kB for the hyper-compressed version, and tidy code, this plugin won’t bog down your site
or burn out your users’ browsers, even using it in multiple iterations per page.

it's flexible

With the little markup you need to add to your site, you get a full featureset, like the ability to put whatever data you want within the slide window, even mixed types, a proportionally-correct status display that configures itself, fullscreen display and swipe functionality.

it's neat

Add some slick usability
to your site with a plugin that’s fun and easy to use. And if you have any other questions, I’ll be happy
to help you out.

download

the big boy

the mini

image slideshow

You can set up...

"Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that's why it is so complicated."

—Paul Rand

...a presentation-style slideshow...

"Designers can create normalcy out of chaos; they can clearly communicate ideas through the organising and manipulating of words and pictures."

Jeffery Veen

...to give information.

"Good design, at least part of the time, includes the criterion of being direct in relation to the problem at hand - not obscure, trendy, or stylish. A new language, visual or verbal, must be couched in a language that is already understood."

Ivan Chermayeff

text presentation

<div class="simpleSlide-window" rel="1">
    <div class="simpleSlide-tray" rel="1">
        <div class="simpleSlide-slide" rel="1" alt="1">
            content for slide one
        </div>
        <div class="simpleSlide-slide" rel="1" alt="2">
            content for slide two
        </div>
        <div class="simpleSlide-slide" rel="1" alt="3">
            content for slide three
        </div>
    </div>
</div>

You can jump...

Jump to slide 3

...using simpleSlide's...

Jump to slide 4

...from one slide...

Jump to slide 5

...paging system!

You've reached the end :)

...to another...

Jump to slide 2

jump-to

<div class="simpleSlide-window" rel="1">
    <div class="simpleSlide-tray" rel="1">
        <div class="simpleSlide-slide" rel="1" alt="1">
            <span class="jump-to" rel="1" alt="3">jump to slide 3</span>
        </div>
        <div class="simpleSlide-slide" rel="1" alt="2">
            <span class="jump-to" rel="1" alt="2">jump to slide 2</span>
        </div>
        <div class="simpleSlide-slide" rel="1" alt="3">
            <span class="jump-to" rel="1" alt="1">jump to slide 1</span>
        </div>
    </div>
</div>

auto-slideshow

<div class="auto-slider" rel="group"></div>

// Add this javascript, and ensure it appears after the simpleSlide() call

$('.auto-slider').each( function() {
var related_group = $(this).attr('rel');

window.setInterval("simpleSlideAction('.right-button', " + related_group + ");", 4000);
});

fullscreen display reinstantiation on resize

/* Use this code on a page with a fullscreen slideshow. In cases of a browser
* window resize, it will reinstantiate the simpleSlide function. If the
* User is on an iPad or iPhone, it will reload the page (thus, by default
* reinstantiating simpleSlide, but more reliably so).
*/

$(document).ready( function() {
    simpleSlide({'fullscreen': 'true'});
    var timer = setTimeout(null, 0);

    $(window).resize( function() {
        clearTimeout(timer);
        timer = setTimeout('resizer()', 300);
    });
});

function resizer() {
    var agent = navigator.userAgent.toLowerCase();
    var is_iphone = ((agent.indexOf('iphone') != -1));
    var is_ipad = ((agent.indexOf('ipad') != -1));
    if(is_iphone || is_ipad){
        location.reload(true);
    } else {
       simpleSlide({'fullscreen': 'true'});
    };
}