55 Best jQuery Carousel Plugins

jQuery UI CoverFlow 2.0 Using $.widget Hey guys. Today I would like to show you how to create and use a jQuery UI CoverFlow component powered by $.widget and CSS3 transforms. It’s highly extensible, supports click, keyboard and mousewheel interaction and works with the latest versions of both jQuery and jQuery UI (1.4.4 and 1.8.6 respectively). The iTunes CoverFlow effect is one of my favorite user-interface patterns – it’s excellent for navigating around large collections of images (or data represented by images) and I thought it would be of great benefit to put out an updated version of this component out there. If you would like to take a look at a demo or download the sources feel free to grab them below or at the end of this post. Screenshot: CoverFlow: A History Of Implementations Origins You may be surprised to know that there’s been quite a substantial body of work that has gone into bringing the CoverFlow effect to the web over the past few years. PHP + GD/ImageMagick (2006-2008) Flash (2007) Let’s Get Started With $.widget

Barousel, a jQuery carousel plugin Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content. Usage To generate a Barousel you need to use the following HTML structure: <div id="any_id" class="barousel"><div class="barousel_image"><! Then apply the Barousel plugin with the following Javascript call (default settings): $('#any_id').barousel(); Options Barousel can be customized using the following options on the Javascript call: Download Compatibility jQuery 1.3.x + Firefox 3+ Internet Explorer 6+ Chrome 1+ Safari 3+ Demos Manual + item navigation Automatic + previous/next navigation Thslide is a jQuery plugin to easily generate sliding lists. To generate a Thslide you need to use the following HTML structure: Then apply the Thslide plugin with the following Javascript call (default settings): $('#any_id').thslide(); Thslide can be customized using the following options on the Javascript call: Demo Thumbnails slider with infinite scroll Custom navigation Link 1 Link 2

Combadi | Innovative holiday & travel ideas that help you learn, grow and change. jCoverflip – Plugin jQuery – Le Coverflow simple et efficace Je reviens avec un article sur un plugin jQuery qui va vous permettre de réaliser un ou plusieurs Coverflow de manière simple et efficace. Je dis simple si vous possédez des notions de jQuery, bien entendu. Ce plugin, c’est jCoverflip, qui utilise le framework javascript jQuery (normal) et jQuery UI (disponible ici). Voici un exemple basique de l’utilisation de ce plugin jQuery : Appel des librairies utiles au bon déroulement des opérations <script type="text/javascript"> $(function(){ $('#flip').jcoverflip(); });</script> L’élément avec l’ID #flip se verra touché par l’effet de jCoverflip. On s’aperçoit que l’élément avec l’ID #flip est une liste “ul” avec lien, image et titre. Et là votre Coverflow est fonctionnel. Bien entendu, il y a de multiples options et variantes, options disponibles sur cette page. A savoir qu’une version pour Drupal existe. Retrouver le plugin téléchargeable sur ce lien et une démonstration ici. Bon code à tous ! Articles qui peuvent vous intéresser :

E-nova - Agence web offshore Créer un effet de coverflow avec Jquery Popularisé par Apple avec l’interface de l’Iphone, le coverflow est un moyens de présenter des images ou des liens sous forme de vignettes animées. Jquery offre la possibilité de générer ce genre d’effets, voila une sélection de plugins et de scripts qui vous permettront d’insérer cet effet sur vos sites. ContentFlow permet de nombreux effet outre l’effet de coverflow classique (réflexion, carrousel, vague rotation autour d’un axe) jQuery UI CSS3 CoverFlow est développé par Addy Osmani c’est un script créé avec basé sur jQueryUI 1.8.6 et jQuery 1.4.4 qui peut être adapté a de nombreux besoins (pour peux qu’on ai envie de mettre les doigts dans le code le coverflow est présenté la, le code peut être téléchargé (au passage, l’article présente un historique des coverflow toutes technologies confondues) jcoverflip Roundabout Créer un effet de coverflow avec Jquery

Ressources Javascript pour intégrateurs web front-end jQuery Timelinr Dando vida al tiempo / Giving life to time Selecciona tu idioma / Select your language: This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.6 Configuration: Include the jQuery library and this plugin: Inicialize-it with the default parameters: $(function(){ $().timelinr();}); Or configure it as preferred: HTML markup must be as follows: <div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum. Icon designed by Sebastián Cortés Changelog: Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Última versión estable: 0.9.6 Configuración: Incluye la librería jQuery y luego este plugin: Inicialízalo con los parámetros por defecto: O customízalos: El marcado HTML debe ser de la siguiente forma: Cambios: Demo Horizontal