Unslider est un script jQuery qui fait partie de la grande famille des Sliders (aussi appelé Diaporama, Carousel, Présentation, etc.). Son point fort est la sobriété : pas d’effet foufous ou de marquage HTML superflu. Unslider fait le minimum et le fait bien ! Toutefois, ses 3kb n’empêche pas Unslider de répondre à un cahier des charges rigoureux : →
Tiny Circleslider propose un système de Slider / Carousel circulaire pour donner aux développeurs web une alternative aux systèmes existants, bien monotones, il faut bien le dire… Construit à l’aide de jQuery, Tiny Circleslider est compatible avec iPhone, iPad et Android et les slides peuvent s’effectuer via des miniatures ou un numéro d’ordre. Ce plugin propose de nombreuses options, pour un poids modeste de 4kg une fois minifié. →
Liquid Slider est un Slider jQuery (avec des morceaux de HTML5 dedans) conçu avec les contraintes des périphériques mobile à l’esprit pour assurer à vos contenus un affichage optimum quelque soit la taille ou la résolution de l’écran de vos visiteurs. →
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.
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. →
Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows. Last but not least, vous pourrez accéder à une dernière liste composée d’une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui ne prennent pas les nouvelles API’s en charge. A quelques exceptions près, les liens pointent directement sur les sources d’origine.
Blueberry est un plugin jQuery expérimental et open source permettant de faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design). Les utilisateurs utilisent de plus en plus souvent des smartphones pour consulter des pages web ; les intégrateurs web ont donc de plus en plus besoin de maquettes flexibles pour les satisfaire. Voici donc un diaporama adapté à cet usage. →
Le webdesign réactif (traduction approximative de Responsive Webdesign) est un ensemble de techniques permettant d’adapter la mise en page d’un site web selon le périphérique de l’utilisateur. Avec l’arrivée des Media Queries en CSS3, le webdesign réactif devient de plus en plus utilisé. Il manquait toutefois des carousels réactifs. C’est le cas de Elastislide qui profitera au mieux des caractéristiques de l’écran. Via @guerrier. →
FlexSlider est un slider, un de plus, qui permettra de faire défiler vos contenus avec le marquage HTML de votre choix. FlexSlider est utilisable avec le clavier, ce qui est toujours bon pour l’accessibilité ; son poids plume (6 kb minifié) est également un atout de taille. Il est possible d’ajouter une légende (caption) pour chaque image. Pour cela, une simple balise p sous l’image suffit. Pour plus de sémantique et pour profiter des nouvelles balises apportées dans la hotte du Père Noël HTML5, il faudrait tester FlexSlider avec une balise figure et un bon vieux figcaption des familles. Merci à @allfordesign et @oncletom pour la suggestion 🙂 →
Les diaporamas et autres Slideshows sont devenus un passage quasi-obligé pour les sites qui veulent présenter un grand nombre d’informations tout en ménageant l’espace disponible. Voici une liste condensée de 73 tutoriels ou scripts jQuery détaillés pour mettre en avant vos contenus texte et/ou image. →
