jQuery.carouFredSel est un plugin jQuery qui transforme n’importe quel élément HTML en carousel «responsive». Le déplacement peut concerner un ou plusieurs éléments simultanément, dans le sens horizontal ou vertical, de manière infinie et circulaire, automatiquement ou suite à une action de l’utilisateur (clic ou clavier). Si toutes les options sont optionnelles, le site propose Configuration Robot : il suffit de répondre à quelques questions pour configurer le plugin à la mode de chez vous.

• Plugins Ajax et tutoriels
• Alertes et fenêtres modales
• Animation et effet
• Navigateurs
• Graphiques et présentations
• Sélecteurs de couleur
• Bordures et coins
• CSS
• DOM
• Glissé-déposé
• Téléchargement de fichiers
• Flash et média
• Formulaires (select et boite)
• Validation de formulaires
• Champs de formulaires
• Jeux et développement de jeux
• Grilles
• Editeurs en ligne
• Cartes
• Photos/Images/Galeries
• Développement de plugins
• Plugins de vote
• RSS et XML/XSLT
• Recherche
• Diaporama et menus accordéon
• Bookmarking social
• Tableaux et tri de tableaux
• Tabs/Menus/Navigation
• Tags et nuages de tag
• Textes et liens
• Calendriers
• Tooltip et tutoriels

Via @JeffPalmier

Le code

Le carousel de base peut être une simple simple non-ordonnée :

<ul id="demo">
    <li><img src="img/photo01.jpg" /></li>
    <li><img src="img/photo02.jpg" /></li>
    <li><img src="img/photo03.jpg" /></li>
</ul>

Accompagné d’un peu de CSS :

#demo, #demo li { margin:0; padding:0; width:900px; height:495px; list-style:none; }
#demo { overflow: hidden; }
#demo li { float:left; }

L’appel jQuery :

jQuery('#demo').moodular({
    effects: 'left',
    controls: '',
    auto: true,
    easing: '',
    speed: 1000,
    dispTimeout: 3000
});

Paramètres supplémentaires

Moodular ne s’arrête pas là et propose des options telles que :

• Mouvement du carousel vers le bas, le haut ou la droite (en plus de la gauche),
• Effet de Fading pour les transitions,
• Affichage d’une légende,
• Flèches de navigation Suivant – Précédent (mais aussi Bas – Haut),
• Index (liste de nombre) pour naviguer dans les slides,
• Affichage des miniatures de chaque slide sous l’image principale.

→ Moodular est disponible sur Github.

Du même auteur : voir DyLay — Tri et maquette dynamiques avec jQuery

• Mise sur pause du diaporama lorsque le curseur de la souris passe sur l’animation,
• Adaptation de la largeur du container,
• Possibilité d’ajouter une fonction de rappel avant et/ou après,
• Liens Suivants / Précédents pour passer d’une diapo à l’autre,
• Ajustement du délai de transition entre les diapos.

→ Cycle Lite est disponible sur Github.

Marquage HTML nécessaire pour utiliser Blueberry :

<div class="blueberry">
    <ul class="slides">
        <li><img src="img/slide1.jpg" /></li>
        <li><img src="img/slide2.jpg" /></li>
        <li><img src="img/slide3.jpg" /></li>
        <li><img src="img/slide4.jpg" /></li>
    </ul>
    <!-- Optional, see options below -->
    <ul class="pager">
        <li><a href="#"><span></span></a></li>
        <li><a href="#"><span></span></a></li>
        <li><a href="#"><span></span></a></li>
        <li><a href="#"><span></span></a></li>
    </ul>
    <!-- Optional, see options below -->
</div>

Appel du plugin Blueberry :

$(window).load(function() {
    $('.blueberry').blueberry();
});

Via @samcome (EtamineDesign)

Le marquage HTML

<div id="carousel" class="es-carousel-wrapper">
    <div class="es-carousel">
        <ul>
            <li>
                <a href="#">
                    <img src="images/medium/1.jpg" alt="image01" />
                </a>
            </li>
            <li>...</li>
        </ul>
    </div>
</div>

L’appel à jQuery

$('#carousel').elastislide({
    imageW : 180
});

Options de Elastislide

Elastislide propose les options suivantes pour adapter le carousel à vos besoins :

speed : 450,
// Vitesse de l'animation
easing : '',
// effet d'animation easing
imageW : 190,
// Largeur des images
margin : 3,
// Marge droite des images
border : 2,
// Bordure de l'image
minItems : 1,
//Nombre minimum d'élément à afficher.
//Lorsque la fenêtre du navigateur est modifiée,
//cette option fait en sorte que les éléments sont toujours montrés
//(sauf si le ninItems est plus élevé que le nombre total d'éléments)
current : 0,
// index de l'élément courant
// Lorsque la fenêtre des modifiée
// le plugin s'assure que l'élément est visible.
onClick : function() { return false; }
// Fonction de rappel sur l'événement click
// Exemple pour obtenir l'index de l'élément cliqué :
$('#carousel').elastislide({
    onClick : function( $item ) {
        alert( 'The clicked item´s index is ' + $item.index() )
    }
});

Marquage HTML

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="slide1.jpg" />
        </li>
        <li>
            <img src="slide2.jpg" />
        </li>
        <li>
            <img src="slide3.jpg" />
        </li>
    </ul>
</div>

Appel Javascript

<script>
    $(window).load(function() {
        $('.flexslider').flexslider();
    });
</script>

Le marquage HTML nécessaire est constitué de deux listes :

<div id="timeline">
    <ul id="dates">
        <li><a href="#" class="selected">date1</a></li>
        <li><a href="#">date2</a></li>
    </ul>
    <ul id="issues">
        <li id="date1" class="selected">
            <p>Lorem ipsum.</p>
        </li>
        <li id="date2">
            <p>Lorem ipsum.</p>
        </li>
    </ul>
    <a href="#" id="next">+</a> <!-- opcional -->
    <a href="#" id="prev">-</a> <!-- opcional -->
</div>

L’appel de jQuery Timelinr avec les paramètres par défaut s’effectue de la manière suivante :

<script>
    $(function(){
        $().timelinr();
    });
</script>

Via +Valentin Brandt

L’installation est simple : il suffit d’une liste avec un identifiant…

<div id="monSlider">
    <ul>
        <li>Contenu du premier slide</li>
        <li>Contenu du deuxième slide</li>
        <li>Contenu du troisième slide</li>
        </ul>
</div>

… et d’invoquer le plugin.

jQuery('#monSlider').jbhSlider();

JbhSlider possède de nombreuses options pour sélectionner les éléments pris en compte pour les sélecteurs, les CSS, les transitions, la pagination, la navigation et les liens «Suivants» et «Précédents».

Paramètres disponibles :

var settings = {
    init: function (slider) {},
    selector: '> ul',
    cssClass: 'jbhSlider',
    elements: {
        selector: '> li',
        cssClass: 'jbhSliderItem'
    },
    css: {
        width: 500,
        height: 250
    },
    transition: {
        type: 'fade',
        duration: 1000,
        timer: 3000,
        before: function (slider, to, transition) {transition();},
        success: function (slider, to) {}
    },
    pagination: {
        type: null,
        text: '{{page}}',
        cssClass: 'jbhSliderPages',
        currentCssClass: 'current',
        tag: 'ol',
        subTag: 'li',
        position: 'after'
    },
    navigation: {
        active: true,
        cssClass: 'jbhSliderNavigation',
        loop: true,
        next: {
            text: '>',
            cssClass: 'jbhSliderNavigationNext'
        },
    previous: {
        text: '<',
        cssClass: 'jbhSliderNavigationPrevious'
    },
    position: 'after'
    }
};

→ JbhSlider — Slider en jQuery.

Comment utiliser Agile Carousel

<link rel="stylesheet" href="agile_carousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.js"></script>
<script>
    // Code used for "Flavor 2" example (above)
    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({
                // required settings
                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                // end required settings
                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button,
                ... (continues on same line)... pause_button,next_button",
                control_set_2: "content_buttons",
                change_on_hover: "content_buttons"
            });
        });
    });
</script>

→ Agile Carousel est sur github.

Vous devriez trouver votre bonheur parmi la myriade d’exemples disponibles. Voir notamment les démonstrations de chargement d’images en provenance de Flickr. Mention spéciale pour le combo jCarousel et Thickbox 3. Cf. jCarousel Lite pour une version allégée.

HTML

<div id="content-slider">
<ul id="content-slider-inside">
	<li id="one">1</li>
	<li id="two">2</li>
	<li id="three">3</li>
	<li id="four">4</li>
	<li id="five">5</li>
</ul>
</div>
<ul id="navigation">
	<li><a href="#one">1</a></li>
	<li><a href="#two">2</a></li>
	<li><a href="#three">3</a></li>
	<li><a href="#four">4</a></li>
	<li><a href="#five">5</a></li>
</ul>

CSS

#content-slider {
    width: 650px;
    overflow: hidden;
    height: 300px;
}

#content-slider-inside {
    list-style: none;
    height: 320px; 	/* these 3 lines */
    overflow: scroll;	/* help Opera */
    overflow-y: hidden;	/* behave */
}

#content-slider-inside li {
    width: 650px;
    height: 300px;
}

Content Switcher est basé sur le principes dans ancres internes, ce qui oblige à préciser les identifiants de chaque élément de la liste pour faire la correspondance avec les liens de la navigation.

Voir la démonstration de Content Switcher sans Javascript et avec jQuery.

var slideshow=new TINY.slider.slide('slideshow',{
    id:'slides', // ID of the parent slideshow unordered list
    auto:3, // Seconds to auto-advance, defaults to disabled
    resume:true, // Resume after interrupted, defaults to false
    navid:'pagination', // Optional ID of direct navigation UL
    activeclass:'current', // If navid, class to set on the current LI
    visible:true, // Initially display the first slide vs fading it in
    position:0 // Initial slide position, defaulting to the 0 index
});

• Voir la démonstration,
• Télécharger TinyFader,
• Via John’s Graphisme.

Une dizaine de paramètres permettent de personnaliser le comportement et l’affichage du diaporama, dont notamment : le choix de la balise container, la gestion de la pagination, le démarrage automatique au bout d’un certain nombre de millisecondes, etc.

Exemples de Sliders avec du texte et avec des images.

LoopedSlider est disponible sur GitHub.

Les nombreuses options de Sudo Slider permettent toutes les fantasies que l’on est en droit d’attendre d’un slider avec en prime la prise en charge des navigateurs utilisés actuellement (dont IE6). Il est possible de faire le tour de l’ensemble des contenus en cliquant uniquement dans la même direction.

Voir la démo.

• Nombre de sliders illimité sur une même page,
• Gestion de la pagination avec des ancres (possibilité de mettre la page en favoris),
• Le plus important : fonctionnel en l’absence de Javascript.

Exemple d’utilisation

$(document).ready(function(){
    $('.slider_img').BasicSlider({
        speed : 'normal',
        nbslide : 1,
        auto : false,
        autodelay : 2000,
        mode : 'horizontal',
        navigation : true,
        showtitle : false,
        pagination : false
    });
});

En attendant une page de démonstration, l’archive de la version 2.1  contient  déjà six exemples séparés dans trois fichiers. N’hésitez pas à faire des retours car Jonathan est très réactif : il veut proposer une solution simple, efficace, dans le respect des bonnes pratiques.

Edit du 06/03/2010 : pour preuve de sa réactivité Jonathan a déjà mis en place la page dédiée à BasicSlider avec démonstrations et exemple à la clé.