Carrousel continu conduit par jQuery UI

Ce carrousel continu jQuery UI, rcarousel, propose un voyage nostalgique à des carrousels d'enfance, mais sans le mal des transports! La version 1.1 offre des améliorations significatives, y compris la prise en charge de tout contenu HTML (pas seulement des images) et une utilisation simplifiée. Ajoutez simplement votre contenu à un conteneur et initialisez le widget.

hautement personnalisable, le rcarousel permet plusieurs carrousels par page, des éléments visibles variables et des étapes de défilement réglables. Le chargement dynamique des éléments via l'API (par exemple, la récupération de XML ou JSON) est également pris en charge. Les caractéristiques clés incluent des options étendues, des images et des éléments liés et des capacités de carrousel vertical.

Tout en offrant une large compatibilité des navigateurs (Internet Explorer 7, Firefox 3.0, Chrome, Opera 10.10, Safari 4.0.5), il n'est pas conçu pour les navigateurs ultra-anciens.

développé et maintenu pendant le temps libre de l'auteur, Rcarousel témoigne de la collaboration open source. Les dons sont appréciés pour soutenir le développeur pendant les périodes de chômage. Pour ceux qui utilisent Lightbox, l'auteur recommande également RlightBox2.

sur l'auteur

Wojciech Ryrych, un développeur frontal autodidacte de Pologne, est passionné par Linux, l'open source et l'apprentissage continu.

Page de rcarousel: (lien cassé)

Questions fréquemment posées (FAQ)

Comment puis-je personnaliser l'apparence du carrousel? Personnaliser facilement la conception du carrousel en modifiant son fichier CSS associé pour correspondre au style de votre site Web, y compris les couleurs, les polices et les dimensions. Utilisez les classes de JQuery UI ou créez des styles personnalisés pour des effets uniques.

Puis-je utiliser plusieurs carrousels sur une seule page? Absolument! Assurez-vous que chaque carrousel a un identifiant unique pour éviter les conflits et les initialiser individuellement dans votre javascript. Réglez les paramètres (éléments visibles, vitesse, direction) au besoin par carrousel.

Comment ajouter des légendes de l'image? nid a <div> élément avec la classe "Légende" à l'intérieur de chaque élément <code><li> contenant votre image. Statuez ces légendes dans votre CSS et positionnez-les de manière appropriée. La génération de légende dynamique basée sur l'image alt Les attributs sont également possibles en utilisant jQuery.

comment puis-je activer le défilement automatique? Utiliser l'option auto dans les paramètres du carrousel. Une valeur numérique positive définit le retard de défilement (en millisecondes), tandis que true utilise la vitesse par défaut.

prend-il en charge les événements tactiles sur les appareils mobiles? Oui, les événements tactiles sont pris en charge. Swipe to défiler, et l'option touchEnabled permet d'activer / désactiver le contrôle tactile.

comment puis-je ajouter des boutons de navigation? Inclure les boutons "PREV" et "Suivant" dans votre HTML et utilisez jQuery pour lier les événements de clic, appelant les méthodes du carrousel prev et next.

Puis-je charger des éléments dynamiquement à partir d'une base de données ou d'une API? Oui, utilisez Ajax pour récupérer des données, puis créez des éléments <li> avec jQuery et ajoutez-les au carrousel. N'oubliez pas d'appeler la méthode reload pour mettre à jour l'état du carrousel.

Comment puis-je ajouter des transitions de fondu? Utiliser la méthode de jQuery animate dans les rappels du carrousel before et after pour s'estomper / dans les éléments pendant les transitions.

Puis-je faire une pause sur le carrousel sur le plan de survol? Oui, définissez l'option hoverPause sur true pour mettre en pause le défilement automatique sur le plan de volant et reprendre lorsque la souris part.

Puis-je l'utiliser avec d'autres widgets d'interface utilisateur jQuery? Oui, initialisez d'autres widgets d'interface utilisateur jQuery et intégrez-les avec rcarousel dans votre fichier javascript. Par exemple, utilisez un curseur pour contrôler la vitesse de défilement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!