Moodular — Fabrique de Carousel avec jQuery

Moodular — Ce plugin jQuery créé par @GouZ permet de créer des carousels (aussi appelés : diaporama ou slider) très facilement. Le nom du script est la contraction de mood (humeur, ambiance) et de modular (modulaire) : tout un programme ! Moodular est composé de nombreuses options que vous pouvez activer depuis la page du site via un formulaire. Il est également possible de créer vos propres effets.

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