08/04/12

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 SuivantPrécédent (mais aussi BasHaut),
  • 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



3 commentaires pour “Moodular — Fabrique de Carousel avec jQuery”

  1. […] Voir l’article entier: Moodular — Fabrique de Carousel avec jQuery PicMonkey : un site gratuit pour créer des effets photos (Autour du Web) Popular PostsRelated PostsLe htaccess pour les nulsMeter et progress – HTML5 (Alsacreations)turn.js – Effet de page tournée en Javascript (js.4design)Organise efficacement tes flux RSS (coreight)Moodular — Fabrique de Carousel avec jQueryPicMonkey : un site gratuit pour créer des effets photos (Autour du Web)jQuery Masked Input — Masque de saisie pour les champs input (js.4design.tl)5 facteurs pour préserver ton réseau de blogs SEO Rechercher Recherche pour: […]

  2. mainserv dit :

    Un petit bug quand on affiche Thumbnails et Index sur la démo, il y a un décalage entre ces deux modes. Je pense qu’ils ne doivent pas vraiment fonctionner ensemble.

  3. […] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } js.4design.tl – Today, 2:13 […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »