Une sélection de curseurs adaptatifs. Une sélection de curseurs adaptatifs Curseur Jquery avec navigation

1. Plugin jQuery « Fresque »

Galerie jquery réactive (redimensionnée lorsque la résolution de l'écran change), affichée dans une fenêtre contextuelle avec des vignettes et des légendes d'images. La galerie Jquery « Fresco » fonctionne correctement dans la plupart des navigateurs, notamment : IE6+, Firefox 3+, Chrome 5+, Opera 9+. La version gratuite de ce plugin ne peut être utilisée que sur des projets non commerciaux.

2. Curseur « Adaptateur »

Slider avec divers effets de transition (7 effets différents, dont 3D). Projet sur Github.

3. Plugin Slider avec divers effets « jQ-Tiles »

Plugin avec divers effets de transition, vitesse de glissement personnalisable et fonction de défilement automatique.

4. Plugin jQuery « Sly »

Plugin pour implémenter un scroller vertical et horizontal. Projet sur Github.

5. Menu animé CSS3 « Makisu »

6. Diaporama simple

7. Curseur jQuery fonctionnel «iView Slider v2.0»

Curseur de contenu/diaporama (la diapositive peut contenir non seulement des images, mais également des clips vidéo et d'autres contenus HTML). Pour la navigation, vous pouvez utiliser : les vignettes, les boutons Gauche/Droite et l'utilisation du clavier. Projet sur Github.com.

8. Ensemble de plugins jQuery « Vanity »

L'ensemble comprend 7 plugins : jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder et jCollapse. Un ensemble de ces solutions vous aidera à implémenter un curseur, des info-bulles, des onglets, des descriptions d'images contextuelles, etc.

9. Survolez l'effet CSS3

10. Menu déroulant CSS3

11. Curseur iOS

Slider, adapté pour travailler sur appareils mobiles Oh.

12. Indicateur de chargement CSS3

13. Effet de survol CSS3

14. Plugin jQuery « Product Colorizer »

Le plugin est solution facile pour mettre en œuvre la visualisation des produits dans différentes options de couleurs (pertinent, par exemple, pour les magasins de vêtements en ligne pour permettre aux visiteurs de choisir la palette de couleurs d'un produit parmi plusieurs options). Pour que le plugin fonctionne, vous n'avez besoin que de deux images pour chaque produit (toutes les couleurs seront appliquées comme un masque). Le plugin fonctionne dans tous les principaux navigateurs, y compris IE7+ (fonctionnera également dans IE6 si vous corrigez l'affichage de la transparence PNG). Projet sur GitHub.

15. Graphiques animés CSS3

16. Créez un effet de superposition en cliquant sur une image

Lorsque vous cliquez sur une image, elle s'assombrit, passe en arrière-plan et des éléments avec des légendes apparaissent. De cette façon, vous pouvez donner brève descriptionéléments situés dans l’image.

17. Navigation dans les pages sous forme de menu déroulant

Une solution pour mettre en œuvre une navigation pratique dans les documents sous la forme d'un menu déroulant. Le contenu est fixé en haut de l'écran et reste toujours dans le champ de vision du spectateur. Lorsque vous sélectionnez une section dans le menu, la page défile en douceur jusqu'à la partie sélectionnée du document.

18. Galerie CSS3 avec effet de survol

Lorsque vous passez votre curseur sur une image, les photos changent rapidement. La galerie est réalisée en deux versions : avec une description des images qui apparaît après que le visiteur éloigne le curseur de la galerie et sans description.

19. Curseur jQuery avec effet Parallax

20. Animation CSS3 lors du survol des blocs

21. Panneau contextuel CSS3 jQuery

Cliquez sur la flèche en bas de l'écran sur la page de démonstration pour voir les icônes contextuelles.

22. Galerie d'images HTML5 gratuite « Juicebox Lite »

Une nouvelle galerie d'images très fonctionnelle pour le site. La galerie peut être avec ou sans vignettes, avec ou sans description de l'image, peut être agrandie en plein écran ou affichée sur une page aux dimensions fixes. Sur la page de démonstration, vous pouvez choisir la vue de la galerie que vous aimez. Disponible pour le téléchargement version gratuite galeries. Vous devrez payer pour des fonctionnalités plus avancées et supprimer le logo du développeur.

23. Plugin « JQVMap »

24. Curseur CSS3 avec effet Parallax

25. Galerie de photos jQuery avec vignettes

La taille de la galerie réactive, des images et des vignettes change en fonction de la taille de la fenêtre du navigateur.

26. Plugin de curseur de contenu jQuery « Horinaja »

Le plugin est facile à installer, personnalisable et compatible avec tous les navigateurs. Tout contenu HTML, et pas seulement les images, peut servir de diapositive. Vous pouvez faire défiler les diapositives à l'aide de la molette de la souris lorsque le curseur se trouve sur la zone des diapositives.

27. Plugin de curseur jQuery « Pikachoose »

En trois variantes : mise en place d'un simple changement d'images sans descriptions ni vignettes ; curseur avec légendes d’images et vignettes ; curseur avec vignettes et ouverture ajoutée d'une image plus grande dans une fenêtre pop-up avec l'effet FancyBox. La dernière version peut toujours être trouvée sur Github.

28. Plusieurs styles CSS personnalisés pour les listes déroulantes

Cinq styles de listes déroulantes différents utilisant différentes techniques CSS.

29. Menu du restaurant avec effet 3D animé

Présentation CSS jQuery intéressante des informations sur la page. En cliquant sur le lien, le livret de menu s'ouvre et le visiteur peut en savoir plus sur les plats proposés dans une fenêtre pop-up. L'animation ne s'affiche pas correctement dans IE.

30. Plugin « Elastislide »

Mise en place d'un carrousel adaptatif en caoutchouc (carrousel d'images vertical et horizontal) et d'une galerie d'images. La réduction de la fenêtre du navigateur réduit le nombre d'images à une certaine valeur minimale, puis redimensionne la taille des images restantes. Projet sur Github.

31. Nouveau curseur jQuery CSS3 « Slit Slider »

Un plugin de curseur adaptatif (la largeur peut être définie en pourcentage et elle sera automatiquement mise à l'échelle) dans deux styles avec un effet d'animation intéressant lors du changement de diapositive (la diapositive est coupée en deux et se déplace dans des directions différentes, et une nouvelle prend sa place ). La navigation à l'aide du clavier est possible. Dernière version toujours sur Github.

32. Nouvelle version du slider d'image 3D « Slicebox »

Une nouvelle version avec des modifications apportées et de nouvelles fonctions ajoutées : désormais le curseur 3D est devenu évolutif, vous pouvez le voir lorsque vous réduisez la fenêtre du navigateur ; ajoutée Prise en charge de Firefox; dans la description de la diapositive, vous pouvez déjà utiliser du contenu HTML (auparavant, la description était extraite de l'attribut de lien sans possibilité d'utiliser Balises HTML). Sur la page de démonstration, vous pouvez voir 4 options pour utiliser le plugin. Dernière version vit sur Github.com.

L'effet est très similaire à la galerie Flash 3D CU3ER (démo, téléchargement), seul ce slider 3D est réalisé non pas à l'aide de technologies flash, mais à l'aide de javascript.

33. Plugin jQuery « PFold »

Solution expérimentale. Le plugin implémente un effet 3D simulant le déroulement d'une note. Différentes options de conception : avec trois planches, avec deux planches et une planche avec centrage ultérieur du billet déplié.

34. Plugin jQuery « Windy »

Plugin pour naviguer dans le contenu, tel que les images. Lorsque vous faites défiler les photos, elles s'écartent dans des directions différentes (l'effet rappelle un peu la distribution des cartes dans le jeu de cartes de poker). Pour naviguer, vous pouvez utiliser les boutons gauche/droite ou le curseur (voir différentes options sur la page de démonstration). Projet sur

La conception Web adaptative, ou si vous préférez, réactive n'est plus seulement une autre tendance de conception, c'est déjà une certaine norme pour le développement de sites Web, garantissant la polyvalence des sites Web et une perception visuelle harmonieuse sur les écrans des différents appareils des utilisateurs. Plus récemment, lors du développement modèle adaptatif, j'ai dû faire face à diverses difficultés pour intégrer certains sliders et galeries d'images sans perturber le style global du design. De nos jours, tout est beaucoup plus simple, il existe un grand nombre de solutions toutes faites sur Internet et ce qui est particulièrement agréable, c'est que la plupart d'entre elles sont en accès libre, Open source.

En raison de la variété des outils proposés, j'ai compilé un bref aperçu des développements les plus notables de curseurs d'images jQuery réactifs apparus récemment et distribués sans aucune restriction, c'est-à-dire complétement gratuit.

WOW Curseur

Curseur d'image jQuery réactif avec un grand ensemble d'effets visuels (rotation, menu déroulant, flou, spirales, stores, etc...) et de nombreux modèles prêts à l'emploi. Avec l'assistant d'insertion de page intégré de WOW Slider, vous pouvez créer facilement et sans effort de superbes diaporamas en quelques minutes. Le site Web du développeur contient toute la documentation nécessaire à la configuration et à l’utilisation du plugin en russe, ainsi que d’excellents exemples en direct du fonctionnement du plugin. Également disponible en téléchargement séparément Plugin Wordpress et un module pour Joomla. Je suis sûr que beaucoup aimeront ce merveilleux curseur, aussi bien les webmasters débutants que expérimentés.

SalutSlider

HiSlider - HTML5, curseur Jquery et galerie d'images, plugin absolument gratuit pour un usage personnel sur des sites exécutant des systèmes populaires - WordPress, Joomla, Drupal. Avec l'aide de cet outil simple mais très fonctionnel, vous pouvez facilement créer des diaporamas étonnants et dynamiques, des présentations spectaculaires et des annonces de nouveaux messages sur les pages de vos sites Web. Plusieurs modèles et skins prêts à l'emploi pour le curseur, des effets de transition (changement) de contenu étonnants, la sortie de divers contenus multimédias : vidéos de YouTube et Vimeo, paramètres utilisateur flexibles, etc...

Curseur Nivo

Nivo Slider est un bon vieux, bien connu de tous, l'un des curseurs d'image les plus beaux et les plus faciles à utiliser. Le plugin JQuery Nivo Slider est gratuit à télécharger et à utiliser et est sous licence MIT. Il existe également un plugin séparé pour WordPress, mais malheureusement il est déjà payant et vous devrez payer 29 $ pour une licence. Il est préférable de faire un peu de magie avec les fichiers de thème WP et de joindre la version gratuite jQuery du plugin Nivo Slider à votre blog, car il existe de nombreuses informations sur la façon de procéder sur Internet.
Quant à la fonctionnalité, tout va bien. Il utilise la bibliothèque jQuery v1.7+, de superbes effets de transition, des paramètres simples et très flexibles, une mise en page adaptative, un recadrage automatique des images et bien plus encore.

L'idée du curseur a été inspirée par les développeurs, bien connus pour le style de présentation des produits Apple, où plusieurs petits objets (images) changent en cliquant sur la catégorie sélectionnée avec un simple effet d'animation. Codrops présente à votre disposition une leçon détaillée sur la façon de créer ce slider, une mise en page complète du balisage HTML, un ensemble Règles CSS et un plugin jQuery exécutable, ainsi qu'un merveilleux exemple live d'utilisation du curseur.

Curseur de fente

Slider d'image plein écran utilisant JQuery et CSS3 + tutoriel détaillé sur l'intégration du plugin dans les pages du site Web. L'idée est de découper la diapositive actuelle ouverte avec un contenu spécifique lors du passage au contenu suivant ou précédent. En utilisant l'animation JQuery et CSS, vous pouvez créer des transitions uniques entre les diapositives. La disposition réactive du curseur garantit une apparence égale sur tous les écrans divers types appareils utilisateur.

Curseur de contenu élastique

Un curseur de contenu qui s'ajuste automatiquement en largeur et en hauteur en fonction de la taille du conteneur parent dans lequel il se trouve. Assez simple à mettre en œuvre et flexible dans les réglages, le slider fonctionne sur JQuery, avec navigation en bas lorsque la taille de l'écran est modifiée vers le bas, la navigation s'affiche sous forme d'icônes ; Documentation très détaillée (tutoriel de création) et exemples d'utilisation live.

Curseur de pile 3D

Une version expérimentale du curseur qui montre des images avec des transitions depuis le plan 3D. Les images sont divisées en deux piles horizontales, en utilisant les flèches de navigation pour modifier et faire passer chaque image suivante à l'état de visualisation. En général, rien de spécial, mais l'idée elle-même et la technique d'exécution sont assez intéressantes.

Un curseur d'image jQuery très simple, 100% réactif et plein écran. Le fonctionnement du slider est basé sur les transitions CSS (la propriété transition) en conjonction avec la magie de jQuery. La valeur de largeur maximale est définie par défaut sur 100 %, donc la taille des images changera en fonction des changements de taille de l'écran. Il n'y a pas d'effets d'animation spéciaux ni de fioritures dans la conception, tout est simple et conçu pour un fonctionnement sans problème.

Diapositives minimales

Le nom parle de lui-même, c'est peut-être l'un des curseurs d'image jQuery les plus légers et minimalistes que j'ai rencontrés (plugin de 1 Ko). ResponsiveSlides.js est un petit plugin jQuery qui crée un diaporama en utilisant des éléments à l'intérieur d'un conteneur. Fonctionne avec une large gamme de navigateurs, y compris toutes les versions d'IE - le fameux frein au progrès, à partir d'IE6 et supérieur. Le travail utilise des transitions CSS3 en conjonction avec javascript pour plus de fiabilité. Disposition simple utilisant une liste non ordonnée, personnalisation des transitions et des intervalles de temps, contrôle automatique et manuel du changement de diapositive, ainsi que prise en charge de plusieurs diaporamas à la fois. C’est un « bébé » tellement joueur.

Caméra

Appareil photo - gratuit Plugin JQuery pour organiser des diaporamas sur les pages d'un site Web, un slider léger avec de nombreux effets de transition, une mise en page 100% responsive et des paramètres très simples. S'adapte parfaitement aux écrans de tous les appareils utilisateur (écrans PC, tablettes, smartphones et Téléphones portables). Possibilité de démonstration de vidéo intégrée. Changement automatique de diapositive et contrôle manuel à l'aide de boutons et d'un bloc de vignettes d'image. Une galerie d'images presque complète dans un design compact.

bxSlider jQuery

Un autre curseur réactif assez simple dans jQuery. Vous pouvez placer n'importe quel contenu, vidéo, images, texte et autres éléments sur vos diapositives. Prise en charge étendue écrans tactiles. Utilisation d'animations de transition CSS. Un grand nombre de variantes différentes de diaporamas et de galeries d'images compactes. Contrôle automatique et manuel. Changez de diapositive à l’aide des boutons et en sélectionnant les vignettes. Petite taille fichier source, très simple à configurer et à mettre en œuvre.

FlexSlider 2

FlexSlider 2 - Une version mise à jour du curseur du même nom, avec une réactivité améliorée, une minification du script et une minimisation de la redistribution/redessinage. Le plugin comprend un curseur de base, un contrôle de diapositives avec des vignettes, des flèches gauche-droite intégrées et une barre de navigation inférieure sous forme de boutons. La possibilité d'afficher des vidéos dans des diapositives (vimeo), des paramètres flexibles (transitions, conception, intervalle de temps), une mise en page entièrement adaptative.

Galerie

Un plugin jQuery réactif bien connu et très populaire pour créer des galeries d'images et des curseurs de haute qualité. L'interface du curseur, grâce à son panneau de contrôle, ressemble visuellement à un lecteur vidéo familier ; le plugin comprend plusieurs thèmes de conception différents. Prise en charge des vidéos et des images intégrées provenant de services populaires : Flickr, Vimeo, YouTube et autres. Documentation détaillée sur la configuration et l'utilisation.

Myrtille

Un curseur d'image jQuery simple et sans fioritures, écrit spécifiquement pour site Web adaptatif. Blueberry est un plugin jQuery open source expérimental. Design minimaliste, pas d'effets, seulement des images contextuelles qui se remplacent en douceur après un certain temps. Tout est très simple, installez, connectez et c'est parti...

jQuery popeye 2.1

Un curseur d'image jQuery très compact avec des éléments Lightbox. Grâce à ses dimensions flexibles, il s'intègre très facilement dans n'importe quel conteneur, dans une seule entrée sous forme de vignettes, au survol du curseur de la souris ou en cliquant dessus, une lightbox avec une image agrandie et des commandes s'active. Il est pratique de placer un tel curseur dans les panneaux latéraux pour présenter des produits ou des annonces d'actualité. Une excellente solution pour les sites contenant une grande quantité d’informations.

Séquence

Curseur réactif gratuit avec transitions CSS3 avancées. Style minimaliste, 3 thèmes de conception, Chaque cadre glisse horizontalement, apparaissant au centre, l'image va vers la gauche, la signature vers la droite, les vignettes sont dupliquées dans le coin inférieur droit. Pagination des vues de produits à visualiser dans chaque cadre. Les commandes comprennent également des boutons Précédent et Suivant. Le soutien de tous navigateurs modernes.

Glisser

Un curseur d'image très simple tant en termes de fonctionnalité que de paramètres ; parmi les paramètres il y a un changement de vitesse de changement de diapositives, l'activation du mode manuel (les boutons de commande sont activés), un diaporama continu. Ce slider a le droit d'exister et il ne m'a attiré que parce qu'il existe ; je n'ai rien trouvé de particulièrement intéressant dans cette évolution, peut-être que je ne le cherchais pas bien)))

Curseur d'image réactif

Un si beau curseur d'image adaptatif de Vladimir Kudinov, camarades. Un outil solide et bien conçu, fourni avec des exemples clairs et Instructions détaillées sur la création, l'installation et l'utilisation. Design adaptatif, jolis boutons et flèches vertes, tout est plutôt agréable et calme, sans pression.

Curseur de fraction

Plugin de curseur JQuery gratuit avec effet de parallaxe pour les images et les diapositives de texte. Les animations de diapositives ont plusieurs valeurs d'affichage avec un contrôle total sur chaque paramètre de synchronisation et d'animation. La possibilité d'animer plusieurs éléments sur une diapositive à la fois. Vous pouvez installer diverses méthodes animations, fondus de diapositives ou transitions à partir d’une certaine direction. Affichage automatique et contrôle manuel à l'aide de flèches de navigation qui apparaissent lorsque vous survolez l'image. 10 types d'effets d'animation de diapositives et bien plus encore...

L'examen s'est avéré assez approfondi, mais pas suffisamment informatif en raison de grande quantité les produits en question. Tous les détails et descriptions détaillées Fonctionnalité de tel ou tel plugin, vous pouvez le découvrir directement sur les pages des développeurs. J'espère seulement avoir aidé quelqu'un à trouver plus facilement cet outil indispensable pour créer des curseurs d'images colorés sur les pages de leurs sites Web.

Avez-vous déjà pensé que ce serait bien de pouvoir travailler avec des modèles en russe ? Pensez-y une minute. Ne perdez pas de temps à travailler avec des modèles en anglais. Nous nous empressons de vous faire plaisir que vous puissiez désormais le trouver sur la place de marché TemplateMonster. Le texte de chacun d’eux a été écrit à la main. Et bien sûr, toutes les solutions prêtes à l’emploi sont incroyablement simples à utiliser.

Avec tout mon respect, Andrew

Actuellement, un slider - carrousel - est une fonctionnalité qu'il est simplement nécessaire d'avoir sur un site Web d'entreprise, un site Web de portfolio ou toute autre ressource. Outre les curseurs d'image plein écran, les curseurs de carrousel horizontaux s'intègrent bien dans n'importe quelle conception Web.

Parfois, le curseur doit occuper un tiers de la page du site. Ici, le curseur du carrousel est utilisé avec des effets de transition et des mises en page réactives. Les sites de commerce électronique utilisent un curseur carrousel pour afficher plusieurs photos dans des publications ou des pages individuelles. Le code du slider peut être librement utilisé et modifié selon vos besoins.

En utilisant JQuery en conjonction avec HTML5 et CSS3, vous pouvez rendre vos pages plus intéressantes, leur fournir des effets uniques et attirer l'attention des visiteurs sur une zone spécifique du site.

Slick – plugin de curseur de carrousel moderne

Slick est un plugin jquery disponible gratuitement dont les développeurs affirment que leur solution satisfera toutes vos exigences en matière de curseur. Curseur adaptatif - le carrousel peut fonctionner en mode « mosaïque » pour les appareils mobiles et en mode « glisser-déposer » pour la version de bureau.

Contient un effet de transition de fondu, opportunité intéressante« mode centre », chargement paresseux des images avec défilement automatique. La fonctionnalité mise à jour inclut l'ajout de diapositives et d'un filtre de diapositives. Tout cela pour vous assurer que vous configurez le plugin en fonction de vos besoins.

Mode démo | Télécharger

Owl Carousel 2.0 – jQuery – plugin à utiliser sur les appareils tactiles

Ce plugin dispose d'un large éventail de fonctions, adaptées aussi bien aux développeurs débutants qu'expérimentés. Il s'agit d'une version mise à jour du curseur du carrousel. Son prédécesseur portait le même nom.

Le curseur dispose de plugins intégrés pour améliorer la fonctionnalité globale. Animation, lecture vidéo, lecture automatique du curseur, chargement paresseux, réglage automatique de la hauteur – telles sont les principales caractéristiques d'Owl Carousel 2.0.

Prise en charge du glisser et laisse tomber inclus pour une utilisation plus pratique du plugin sur les appareils mobiles.
Le plugin est parfait pour afficher de grandes images même sur les petits écrans des appareils mobiles.

Exemples | Télécharger

Plugin jQuery Silver Track

Un plugin jquery assez petit mais riche en fonctionnalités qui vous permet de placer un curseur sur une page - un carrousel, qui a un petit noyau et ne consomme pas beaucoup de ressources du site. Le plugin peut être utilisé pour afficher des curseurs verticaux et horizontaux, avec animation et créer des ensembles d'images à partir de la galerie.

Exemples | Télécharger

AnoSlide – Curseur jQuery réactif ultra compact

Curseur jQuery ultra compact - carrousel dont la fonctionnalité est bien supérieure à celle d'un curseur classique. Il comprend Aperçu une image, affichant plusieurs images sous la forme d'un carrousel et d'un curseur basé sur les titres.

Exemples | Télécharger

Carrousel Chouette – Curseur Jquery – carrousel

Le carrousel Owl est un curseur qui prend en charge les écrans tactiles et la technologie glisser-déposer, facilement intégré au code HTML. Le plugin est l'un des meilleurs curseurs qui vous permettent de créer de magnifiques carrousels sans aucun balisage spécialement préparé.

Exemples | Télécharger

Galerie 3D - carrousel

Utilise des transitions 3D basées sur des styles CSS et un peu de code Javascript.

Exemples | Télécharger

Carrousel 3D utilisant TweenMax.js et jQuery

Magnifique carrousel 3D. Il semble qu'il s'agisse encore d'une version bêta, car j'ai découvert quelques problèmes tout à l'heure. Si vous souhaitez tester et créer vos propres sliders, ce carrousel vous sera d'une grande aide.

Exemples | Télécharger

Carrousel utilisant bootstrap

Slider réactif - carrousel utilisant la technologie bootstrap uniquement pour votre nouveau site Web.

Exemples | Télécharger

Curseur de carrousel Moving Box basé sur le framework Bootstrap

Le plus populaire sur les sites Web de portefeuilles et d’entreprises. Ce type de slider - carrousel - se retrouve souvent sur des sites de tout type.

Exemples | Télécharger

Petit curseur circulaire

Ce curseur de petite taille est prêt à fonctionner sur des appareils avec n'importe quelle résolution d'écran. Le curseur peut fonctionner en mode circulaire et carrousel. Le petit cercle est présenté comme une alternative aux autres curseurs de ce type. Support intégré disponible systèmes d'exploitation IOS et Android.

En mode circulaire, le curseur semble assez intéressant. Excellent support de la méthode glisser-déposer et d'un système de défilement automatique des diapositives.

Exemples | Télécharger

Curseur de contenu Thumbelina

Un curseur de carrousel puissant et adaptatif est parfait pour un site Web moderne. Fonctionne correctement sur n'importe quel appareil. Possède des modes horizontaux et verticaux. Sa taille est réduite à seulement 1 Ko. Le plugin ultra compact possède également d’excellentes transitions fluides.

Exemples | Télécharger

Wow – slider – carrousel

Contient plus de 50 effets, qui peuvent vous aider à créer un slider original pour votre site Web.

Exemples | Télécharger

Curseur de contenu jQuery réactif bxSlider

Redimensionnez la fenêtre de votre navigateur pour voir comment le curseur s'adapte. Bxslider est livré avec plus de 50 options de personnalisation et présente ses fonctionnalités avec divers effets de transition.

Exemples | Télécharger

jCarrousel

jCarousel est un plugin jQuery qui va vous aider à organiser la visualisation de vos images. Vous pouvez facilement créer des carrousels d'images personnalisés à partir de la base présentée dans l'exemple. Le curseur est adaptatif et optimisé pour travailler sur les plateformes mobiles.

Exemples | Télécharger

Scrollbox-plugin jQuery

Scrollbox est un plugin compact pour créer un slider - un carrousel ou une exploration de texte. Les principales fonctionnalités incluent des effets de défilement vertical et horizontal avec pause au survol de la souris.

Exemples | Télécharger

dbpasCarrousel

Un simple curseur de carrousel. Si vous avez besoin d’un plugin rapide, celui-ci est 100% adapté. Livré avec uniquement les fonctionnalités de base requises pour que le curseur fonctionne.

Exemples | Télécharger

Flexisel : plugin de curseur JQuery réactif - Carrousel

Les créateurs de Flexisel se sont inspirés du plugin jCarousel à l'ancienne et en ont fait une copie destinée à bon fonctionnement curseur sur les appareils mobiles et tablettes.

La mise en page réactive de Flexisel, lorsqu'elle est exécutée sur des appareils mobiles, est différente d'une mise en page de la taille d'une fenêtre de navigateur. Flexisel est parfaitement adapté au travail sur écrans, aussi bien en basse qu'en haute résolution.

Exemples | Télécharger

Elastislide – curseur adaptatif – carrousel

Elastislide s'adapte parfaitement à la taille de l'écran de votre appareil. Vous pouvez définir le nombre minimum d'images à afficher à une résolution spécifique. Fonctionne bien comme curseur de carrousel pour les galeries d'images, en utilisant un wrapper fixe avec un effet de défilement vertical.

Exemple | Télécharger

FlexSlider 2

Curseur gratuit de Woothemes. Il est à juste titre considéré comme l'un des meilleurs curseurs adaptatifs. Le plugin contient plusieurs modèles et sera utile aussi bien aux utilisateurs novices qu'aux experts.

Exemple | Télécharger

Carrousel incroyable

Amazing Carousel – curseur d’image réactif utilisant jQuery. Prend en charge de nombreux systèmes de gestion de contenu tels que WordPress, Drupal et Joomla. Prend également en charge les systèmes d'exploitation Android, IOS et de bureau sans aucun problème de compatibilité. De superbes modèles de carrousel intégrés vous permettent d'utiliser le curseur en modes vertical, horizontal et circulaire.

Exemples | Télécharger

Si vous devez ajouter un curseur d'image jQuery de haute qualité à votre site, vous trouverez dans cet article une description des plugins nécessaires. Même si JQuery a rendu le travail avec JavaScript beaucoup plus facile, nous avons toujours besoin de plugins pour accélérer le processus de conception Web.

Nous pouvons apporter des modifications à certains de ces plugins et créer de nouveaux curseurs beaucoup plus adaptés aux besoins de notre site.

Pour les autres curseurs, ajoutez simplement des titres, des images et sélectionnez les effets de transition des diapositives fournis avec le curseur. Tous ces plugins sont accompagnés d'une documentation détaillée, donc leur ajouter de nouveaux effets ou fonctions ne sera pas difficile. Vous pouvez même modifier les déclencheurs basés sur des événements si vous êtes un programmeur JQuery expérimenté.

Dernières tendances telles que conception adaptative, sont très importants pour les projets Web, que vous implémentiez un plugin ou un script. Tous ces éléments rendent chacun de ces plugins très flexibles. Tout ce qui est sorti en 2014 est inclus dans cette liste.

Curseurs d'image jQuery

Curseur réactif Jssor

Je suis récemment tombé sur ce puissant curseur jQuery et j'ai pu constater par moi-même qu'il fait très bien son travail. Il contient des possibilités illimitées qui peuvent être étendues grâce au code open source du slider :

• Conception adaptative ;
• Plus de 15 options de personnalisation ;
• Plus de 15 effets de changement d'image ;
• Galerie d'images, carrousel, prise en charge de la taille plein écran ;
• Rotateur de bannière verticale, liste de diapositives ;
• Prise en charge vidéo.

Démo | Télécharger

PgwSlider - slider réactif basé sur JQuery / Zepto

La seule tâche de ce plugin est d'afficher des diapositives d'images. Il est très compact, puisque les fichiers JQuery ne font que 2,5 Ko, ce qui lui permet de se charger très rapidement :

• Disposition adaptative ;
• Optimisation du référencement ;
• Prise en charge de différents navigateurs ;
• Transitions d'images simples ;
• La taille de l'archive n'est que de 2,5 Ko.

Démo | Télécharger

Curseur d'actualités vertical Jquery

Un curseur JQuery flexible et utile conçu pour les ressources d'actualités avec une liste de publications sur le côté gauche et une image affichée à droite :

• Conception adaptative ;
• Colonne verticale pour changer d'actualité ;
• En-têtes développés.

Démo | Télécharger

Curseur de Wallop

Ce slider ne contient pas de jQuery, mais je voudrais le présenter car il est très compact et peut réduire considérablement le temps de chargement des pages. Faites-moi savoir si vous l'aimez :

• Disposition adaptative ;
• Conception simple ;
• Diverses options de changement de diapositive ;
• Code JavaScript minimal ;
• La taille n'est que de 3 Ko.

Démo | Télécharger

Galerie Polaroid de style plat

Une galerie de style document dispersé sur un bureau avec une mise en page flexible et un beau design devrait intéresser beaucoup d'entre vous. Plus adapté aux tablettes et aux grands écrans :

• Curseur adaptatif ;
• Conception plate ;
• Changement aléatoire de diapositives ;
• Accès complet au code source.

Démo | Télécharger

Curseur A

Démo | Télécharger

HiSlider – Curseur d'image HTML5, jQuery et WordPress

HiSlider a introduit un nouveau plugin de slider jQuery gratuit avec lequel vous pouvez créer une variété de galeries d'images avec des transitions fantastiques :

• Curseur adaptatif ;
• Ne nécessite pas de connaissances en programmation ;
• Plusieurs modèles et skins étonnants ;
• Beaux effets de transition ;
• Prise en charge de différentes plateformes ;
• Compatible avec WordPress, Joomla, Drupal ;
• Possibilité d'afficher différents types de contenus : images, Vidéo Youtube et vidéos Vimeo ;
• Configuration flexible ;
• Fonctionnalités supplémentaires utiles ;
• Quantité illimitée de contenu affiché.

Démo |Télécharger

Waouh curseur

WOW Slider est un curseur d'image jQuery réactif avec des effets visuels étonnants ( domino, rotation, flou, retournement et flash, s'envoler, stores) et des modèles professionnels.

WOW Slider est livré avec un assistant d'installation qui vous permet de créer des curseurs fantastiques en quelques secondes sans avoir à comprendre le code ou à modifier des images. Des versions du plugin pour Joomla et WordPress sont également disponibles en téléchargement :

• Entièrement réactif ;
• Prend en charge tous les navigateurs et tous les types d'appareils ;
• Prise en charge des appareils tactiles ;
• Installation facile sur WordPress ;
• Flexibilité dans la configuration ;
• Optimisé pour le référencement.

Démo |Télécharger

Nivo Slider – plugin jQuery gratuit

Nivo Slider est connu dans le monde entier comme le curseur d'image le plus beau et le plus facile à utiliser. Le plugin Nivo Slider est gratuit et publié sous licence MIT :

• Nécessite JQuery 1.7 et supérieur ;
• Beaux effets de transition ;
• Simple et flexible à configurer ;
• Compact et adaptatif ;
• Open source;
• Puissant et simple ;
• Plusieurs modèles différents ;
• Recadrage automatique des images.

Démo |Télécharger

Curseur jQuery simple avec documentation technique

L'idée a été inspirée par les curseurs d'Apple, dans lesquels plusieurs petits éléments peuvent s'envoler avec différents effets d'animation. Les développeurs ont essayé de mettre en œuvre ce concept, en tenant compte des exigences minimales pour créer un design simple de boutique en ligne, dans lequel les éléments « volants » représentent différentes catégories :

• Disposition adaptative ;
• Conception minimaliste ;
• Divers effets de décrochage et de changement de diapositive.

Démo |Télécharger

Curseur d'image jQuery pleine taille

Un slider très simple qui occupe 100% de la largeur de la page et s'adapte aux tailles d'écran des appareils mobiles. Il fonctionne avec les transitions CSS et les images sont « empilées » avec les ancres. L'ancre peut être remplacée ou supprimée si vous ne souhaitez pas attacher de lien vers l'image.

Une fois installé, le curseur s'étend jusqu'à 100 % de la largeur de l'écran. Il peut également réduire automatiquement la taille des images des diapositives :

• Curseur JQuery adaptatif ;
• Taille réelle;
• Conception minimaliste.

Démo |Télécharger

Curseur de contenu Elastic + tutoriel

Elastic Content Slider ajuste automatiquement la largeur et la hauteur en fonction des dimensions de l'élément parent. Il s'agit d'un simple curseur jQuery. Il se compose d'une zone de diapositive en haut et d'une barre d'onglets de navigation en bas. Le curseur ajuste sa largeur et sa hauteur en fonction des dimensions du conteneur parent.

Lorsqu'ils sont visualisés sur des écrans de petite diagonale, les onglets de navigation se transforment en petites icônes :

• Conception adaptative ;
• Défilement par clic de souris.

Démo |Télécharger

Curseur de pile 3D gratuit

Un curseur expérimental qui fait défiler les images en 3D. Les deux piles ressemblent à des piles de papier à partir desquelles, lorsqu'elles défilent, les images s'affichent au centre du curseur :

• Conception adaptative ;
• Retourner - transition ;
• Effets 3D.

Démo |Télécharger

Slider Slit plein écran basé sur JQuery et CSS3 + tutoriel

Ce tutoriel va vous montrer comment créer un slider avec une touche d'originalité : l'idée est de « couper » et d'afficher la diapositive actuelle lorsque vous ouvrez l'image suivante ou précédente. En utilisant JQuery et l'animation CSS, nous pouvons créer des effets de transition uniques :

• Conception adaptative ;
• Transition fractionnée ;
• Curseur plein écran.

Démo |Télécharger

Unislider - un très petit curseur jQuery

Pas de cloches et de sifflets inutiles, taille inférieure à 3 Ko. Utilisez n'importe quel code HTML pour vos diapositives, étendez-le avec en utilisant CSS. Tout ce qui concerne Unslider est hébergé sur GitHub :

• Prise en charge de divers navigateurs ;
• Prise en charge du clavier ;
• Réglage de la hauteur ;
• Conception adaptative ;
• Prise en charge de la saisie tactile.

Démo | Télécharger

Diapositives réactives minimales

Plugin simple et compact ( la taille n'est que de 1 Ko), qui crée un curseur réactif en utilisant des éléments à l'intérieur d'un conteneur. ResponsiveSLides.js fonctionne avec une large gamme de navigateurs, y compris toutes les versions d'IE à partir d'IE6 et supérieures :

• Entièrement réactif ;
• Taille 1 Ko ;
• Transitions CSS3 avec possibilité d'exécution via JavaScript ;
• Balisage simple à l’aide de listes à puces ;
• Possibilité de personnaliser les effets de transition et la durée d'affichage d'une diapositive ;
• Prend en charge la possibilité de créer plusieurs diaporamas ;
• Défilement automatique et manuel.

Démo |Télécharger

Appareil photo - curseur jQuery gratuit

Camera est un plugin avec de nombreux effets de transition et une mise en page réactive. Facile à configurer, pris en charge par les appareils mobiles :

• Conception entièrement réactive ;
• Signatures ;
• Possibilité d'ajouter des vidéos ;
• 33 icônes de couleurs différentes.

Démo |Télécharger

SlidesJS, plugin jQuery réactif

SlidesJS est un plugin réactif pour JQuery (1.7.1 et supérieur) avec prise en charge des appareils tactiles et des transitions CSS3. Expérimentez-le, essayez quelques exemples prêts à l'emploi qui vous aideront à comprendre comment ajouter SlidesJS à votre projet :

• Conception adaptative ;
• Transitions CSS3 ;
• Prise en charge des appareils tactiles ;
• Facile à mettre en place.

Démo | Télécharger

Curseur BX Jquery

Il s'agit d'un curseur jQuery réactif gratuit :

• Entièrement réactif - s'adapte à n'importe quel appareil ;
• Changement de diapositive horizontal et vertical ;
• Les diapositives peuvent contenir des images, des vidéos ou du contenu HTML ;
• Prise en charge étendue des appareils tactiles ;
• Utilisation des transitions CSS pour l'animation de diapositives ( accélération matérielle);
• API de rappel et méthodes entièrement publiques ;
• Petite taille de fichier ;
• Facile à mettre en œuvre.

Démo |Télécharger

FlexSlider 2

Le meilleur curseur réactif. La nouvelle version a été améliorée pour augmenter la vitesse et la compacité.

Démo | Télécharger

Galleria - Galerie de photos réactive basée sur JavaScript

Galleria est utilisé sur des millions de sites pour créer des galeries d'images dans haute qualité. Le nombre de critiques positives sur son travail est tout simplement hors du commun :

• Complètement libre;
• Mode d'affichage plein écran ;
• 100 % adaptatif ;
• Aucune expérience en programmation requise ;
• Prise en charge de l'iPhone, de l'iPad et d'autres appareils tactiles ;
• Flickr, Vimeo, YouTube et plus encore ;
• Plusieurs sujets.

Démo | Télécharger

Blueberry - un simple curseur d'image jQuery réactif

Je vous présente un curseur d'image jQuery écrit spécifiquement pour la conception Web réactive. Blueberry est un plugin expérimental de curseur d'image open source spécialement écrit pour fonctionner avec des modèles réactifs.

Le temps ne s'arrête pas et avec lui le progrès. Cela a également affecté Internet. Vous pouvez déjà constater à quel point l’apparence des sites Web évolue ; la conception adaptative est particulièrement populaire. Et à cet égard, de nombreux nouveaux sont apparus jquery adaptatif curseurs, galeries, carrousels ou plugins similaires.
1. Curseur de publications horizontales réactif

Carrousel horizontal adaptatif avec Instructions détailléesà l'installation. Il est réalisé dans un style simple, mais vous pouvez le personnaliser à votre guise.

2. Curseur sur Glide.js

Ce curseur convient à n’importe quel site Web. Il utilise Glide.js open source. Les couleurs du curseur peuvent être facilement modifiées.

3. Diaporama de contenu incliné

Curseur de contenu réactif. Le point fort de ce slider est l'effet 3D des images, ainsi que différentes animations d'apparence aléatoire.

4. Curseur utilisant le canevas HTML5

Un curseur très beau et impressionnant avec des particules interactives. Il a été réalisé à l'aide d'un canevas HTML5,

5. Curseur de morphing d'image

Curseur avec effet de morphing (Transformation douce d'un objet à un autre). DANS dans cet exemple Le curseur est bien adapté au portfolio d'un développeur Web ou d'un studio Web sous la forme d'un portfolio.

6. Curseur circulaire

Curseur en forme de cercle avec pour effet de retourner l'image.

7. Curseur avec arrière-plan flou

Curseur adaptatif avec commutation et flou d'arrière-plan.

8. Curseur de mode réactif

Curseur de site Web simple, léger et réactif.

9. Slicebox - Curseur d'image 3D jQuery(MIS À JOUR)

Version mise à jour du curseur Slicebox avec des correctifs et de nouvelles fonctionnalités.

10.Grille d’images réactives animées gratuites

Plugin JQuery pour créer une grille d'images flexible qui changera de prise de vue en utilisant différentes animations et timings. Cela peut bien paraître comme arrière-plan ou élément décoratif sur un site Web, car nous pouvons faire apparaître de manière sélective de nouvelles images et leurs transitions. Le plugin est disponible en plusieurs versions.

11. Curseur flexible

Un plugin gratuit universel pour votre site Web. Ce plugin est disponible en plusieurs options de curseur et de carrousel.

12. Cadre photo

Fotorama est un plugin universel. Il dispose de nombreux paramètres, tout fonctionne rapidement et facilement et vous pouvez afficher les diapositives en plein écran. Le curseur peut être utilisé à la fois dans une taille fixe et adaptative, avec ou sans vignettes, avec ou sans défilement circulaire, et bien plus encore.

P.S.J'ai installé le slider plusieurs fois et je pense que c'est l'un des meilleurs

13. Galerie de curseurs 3D gratuite et adaptative avec vignettes.

Curseur de galerie expérimentale Disposition du panneau 3D avec une grille et des effets d'animation intéressants.

14. Curseur sur CSS3

Le curseur adaptatif est réalisé en CSS3 avec une apparence fluide du contenu et une animation lumineuse.

15. Curseur WOW

WOW Curseur est un curseur d'image avec des effets visuels étonnants.

17. Élastique

Curseur élastique avec une réactivité totale et des vignettes de diapositives.

18. Fente

Il s'agit d'un curseur réactif plein écran utilisant une animation CSS3. Le curseur est réalisé en deux versions. L'animation est réalisée de manière assez inhabituelle et magnifique.

19. Galerie de photos adaptative plus

Un simple curseur de galerie gratuit avec chargement d'image.

20. Curseur réactif pour WordPress

Curseur gratuit adaptatif pour WP.

21. Curseur de contenu Parallax

Slider avec effet de parallaxe et contrôle de chaque élément à l'aide de CSS3.

22. Curseur avec lien musical

Slider utilisant le code open source JPlayer. Ce curseur ressemble à une présentation avec de la musique.

23. Curseur avec jmpress.js

Le slider responsive est basé sur jmpress.js et vous permettra donc d'ajouter des effets 3D intéressants à vos slides.

24. Diaporama survol rapide

Diaporama avec changement rapide de diapositive. Les diapositives s'allument en survol.

25. Accordéon d'image avec CSS3

Image accordéon en utilisant CSS3.

26. Un plugin de galerie optimisé pour le toucher

Il s'agit d'une galerie réactive optimisée pour les appareils tactiles.

27. Galerie 3D

Galerie murale 3D- créé pour Navigateur Safari, où l'effet 3D sera visible. Si vous le regardez sur un autre navigateur, la fonctionnalité sera correcte mais l'effet 3D ne sera pas visible.

28. Curseur avec pagination

Curseur réactif avec pagination à l'aide du curseur JQuery UI. L'idée est d'utiliser un concept de navigation simple. Il est possible de rembobiner toutes les images ou de passer d'une diapositive à l'autre.

29.Montage d'images avec jQuery

Organisez automatiquement les images en fonction de la largeur de l'écran. Une chose très utile lors du développement d’un site Web de portfolio.

30. Galerie 3D

Un simple curseur circulaire 3D utilisant CSS3 et jQuery.

31. Mode plein écran avec effet 3D en utilisant CSS3 et jQuery

Un curseur avec la possibilité d'afficher les images en plein écran avec une belle transition.