17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Philippe Le Van (@plv) Dernière mise à jour : 05 April 2012

kitSlideshow, jQuery plugin


A slideShow here is a horizontal presentation of several contents (pages).

Features :

  • Easy to install
  • you can put any content in the pages (images, divs, iframes,.. whatever...)
  • extendable with events
  • compatible IE6 + and any modern browser (including mobile browsers)

Download the plugin

This plugin can be downloaded on Github : jquery_kitSlideshow


click on the square on the right to go to the next page
Let's try with an image

A canvas circle (for enabled browsers)
div No 5
div No 6

This is not very sexy, but I don't have time to code something better right now...

You can see another example on this page

Code sample

Let's see some code sample.

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example kitSlideshow</title>
    <script src="//"></script>

    <script src="../jquery.kitSlideshow.js"></script>
    <link rel="stylesheet" href="../css/kitSlideshow.css"/>

    .myslideshow {
        width: 200px;
        height: 210px;
        overflow: hidden;
    .el {
        display: inline-block;
        zoom: 1;
        *display: inline;
        background-color: #CCCCCC;
        margin: 2px;
        padding: 20px;

<div class="myslideshow">
    <div class="el">
        div No 1
    <div class="el">
        div No 2<br/>
        <a href=""><img src="kitpages_small.jpg"/></a>
    <div class="el">
        div No 3
    <div class="el">
        div No 4
    <div class="el">
        <iframe href="kitSlideshow.html" width="50" height="60"></iframe>
        div No 5
    <div class="el">
        <iframe width="210" height="157" src="" frameborder="0" allowfullscreen></iframe>
        div No 6
    <div class="el">
        div No 7
    <div class="el">
        div No 8


You can configure several options :

    // durations
    moveDelay: 50, // time in ms between moves
    // speed
    animationSpeed: 300, // duration of the animation in ms
    // size
    wrapperMaxWidth: 10000, // width of the entire div which will scroll inside your div
    wrapperMaxHeight: 10000, // idem for height
    animationStepWidth: "auto", //step in px of the animation
    // keys
    keyCodeLeftArrow: 37, // from
    keyCodeRightArrow: 39,
    // events
    render: null, // callback after rendering of dom (called very often during a move)
    animation: null, // callback before animation begins
    stop: null // callback before stop of animation


var animationCallback = function(event, direction) {
    var widget =;
    console.log(direction); // display "left" or "right"
    event.preventDefault(); // stops the beginning of the animation

var renderCallback = function(event) {
    var widget =;
    event.preventDefault(); // stops the rendering of the widget

var stopCallback = function(event) {
    var widget =;
    event.preventDefault(); // stops the end of the move (hum... dangerous...)

// you can use events with 2 methods :

// standard bind :
widget.bind("render_kitSlideshow", renderCallback);

// in the configuration with the "render", "animation" or "stop" callback


Use comments for your questions, remarks,...



Ajouter un commentaire