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, il n'est donc pas difficile de leur ajouter de nouveaux effets ou fonctions. Vous pouvez même modifier les déclencheurs basés sur des événements si vous êtes un programmeur JQuery expérimenté.

Les dernières tendances telles que le responsive design sont très importantes 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 à l'ouverture code source curseur :

• 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 de diapositive aléatoire ;
• 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 du contenu différents types: 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, faire pivoter, flouter, retourner et flasher, 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 ;
• Source ouverte ;
• 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 exigences minimales pour créer un design de boutique en ligne simple 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 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 ;
• Pleine grandeur ;
• 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);
• Rappels API 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. Nouvelle version a été modifié 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 :

• Entièrement gratuit ;
• 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 ;
• 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.

Collection de gratuit Curseur HTML et CSS exemples de code : carte, comparaison, plein écran, réactif, simple, etc. Mise à jour de la collection juin 2018. 7 nouveaux articles.

Table des matières

Articles connexes

À propos du code

Un ensemble d'écrans d'intégration en HTML/CSS/JS. Une expérience personnelle avec la superposition d'icônes PNG, de transitions CSS3 et de flexbox.

Curseur de carte d'information HTML, CSS et JavaScript.
Réalisé par Andy Tran
23 novembre 2015

Curseur de photos fonctionnant sur les navigateurs de bureau et mobiles.
Réalisé par Taron
29 septembre 2014

Curseurs de comparaison (avant/après)

À propos du code

Un curseur de comparaison d'images simple et propre, entièrement réactif et prêt au toucher avec CSS et jQuery.

À propos du code

Un curseur avant et après avec uniquement du HTML et du CSS.

À propos du code

Jouer avec une nouvelle idée en utilisant mon curseur d'image à deux calques avant/après. Le garder minimal. En gardant la vanille. Aimez-le si c'est utile :)

Vanilla JS, minimal, agréable à regarder.
Fabriqué par Huw
3 juillet 2017

À propos du code

Un élément de curseur « écran partagé » avec JavaScript.

Une petite expérience pour un curseur avant et après le tout dans un SVG. Le masquage rend les choses assez simples. Comme tout est SVG, les images et les légendes s’adaptent parfaitement. Les plugins Draggable et ThrowProps de GreenSock ont ​​été utilisés pour le contrôle du curseur.
Réalisé par Craig Roblewsky
17 avril 2017

Utilise une entrée de plage personnalisée pour le curseur.
Fabriqué par Dudley Storey
14 octobre 2016

Curseur de comparaison d'images réactif avec HTML, CSS et JavaScript.
Réalisé par Ege Görgülü
3 août 2016

Curseur de comparaison avant-après des vidéos HTML5, CSS3 et JavaScript.
Fabriqué par Dudley Storey
24 avril 2016

Un curseur déplaçable pratique pour comparer rapidement 2 images, optimisé par CSS3 et jQuery.
Réalisé par CodyHouse
15 septembre 2014

Curseurs plein écran

À propos du code

Curseur simple basé sur les entrées radio. 100% pur HTML + CSS. Fonctionne également avec les touches fléchées.

Réactif : oui

Dépendances : -

À propos du code

Bel effet de transition pour le curseur plein écran.

À propos du code

Curseur coulissant de parallaxe horizontale avec Swiper.js.

À propos du code

Curseur de perspective 3D fluide et réactif lors du déplacement de la souris.

Curseur d'image de héros en plein écran (thème des panneaux de balayage) avec HTML, CSS et JavaScript.
Réalisé par Tobias Bogliolo
25 juin 2017

Un élément d'interaction avec un curseur utilisant les effets Velocity et Velocity (UI Pack) pour améliorer l'animation. L'animation est déclenchée via les touches fléchées, un clic de navigation ou une prise de défilement. Cette version inclut des bordures dans le cadre de l'interaction.
Réalisé par Stephen Scaff
11 mai 2017

Curseur simple dans un style minimal pour afficher les images. Une partie de l'image apparaît sur chaque diapositive.
Réalisé par Nathan Taylor
22 janvier 2017

La chose est assez facilement personnalisable. Vous pouvez modifier en toute sécurité la police, la taille de la police, la couleur de la police et la vitesse d'animation. La première lettre d'une nouvelle chaîne dans un tableau en JS apparaîtra sur une nouvelle diapositive. Il est facile de créer (ou de supprimer) une nouvelle diapositive : 1. Ajoutez une nouvelle ville dans le tableau en JS. 2. Modifiez la variable du nombre de diapositives et placez une nouvelle image dans la liste scss en CSS.
Réalisé par Ruslan Pivovarov
8 octobre 2016

1. Chemin de détourage pour la bordure du rectangle de masquage d'image (webkit uniquement).
2. Mode de fusion pour ce masque.
3. Système de couleurs intelligent, mettez simplement le nom et la valeur de votre couleur dans la carte Sass, puis ajoutez la classe appropriée avec ce nom de couleur aux éléments et tout fonctionnera !
4. Menu latéral sympa des crédits (cliquez sur le petit bouton au centre de la démo).
5. Vanilla js avec juste< 200 lines of code (basically it’s just adds/removes classes).

Ce curseur asymétrique avec défilement basé sur du JS et CSS purs (sans bibliothèques).
Réalisé par Victor Belozyorov
3 septembre 2016

Une animation de curseur avec un design Pokémon.
Réalisé par Pham Mikun
18 août 2016

Curseur HTML, CSS et JavaScritp avec animation complexe et texte incliné en demi-couleur.
Réalisé par Ruslan Pivovarov
13 juillet 2016

Effet de parallaxe du curseur avec HTML, CSS et JavaScript.
Réalisé par Manuel Madeira
28 juin 2016

Curseur HTML, CSS et JavaScript avec effet d'entraînement.
Réalisé par Pedro Castro
21 mai 2016

Curseur révélant Clip-Path avec HTML, CSS et JavaScript.
Réalisé par Nikolaï Talanov
16 mai 2016

Curseur GSAP + Slick avec aperçu des diapositives précédentes/suivantes.
Réalisé par Karlo Videk
27 avril 2016

Curseur pleine page HTML, CSS et JavaScript.
Réalisé par Joseph Martucci
28 février 2016

Prototype de slider complet avec HTML, CSS et JavaScript.
Fabriqué par Gluber Sampaio
6 janvier 2016

Un diaporama plein écran, en quelque sorte réactif, animé avec Greensocks TweenLite/Tweenmax.
Fabriqué par Arden
12 décembre 2015

Curseur plein écran (GSAP Timeline) #1 avec HTML, CSS et JavaScript.
Réalisé par Diaco M.Lotfollahi
23 novembre 2015

Curseur HTML et CSS avec effets personnalisés.
Réalisé par Nikolaï Talanov
12 novembre 2015

Glisseur plein écran avec parallaxe avec HTML, CSS et JavaScript.
Réalisé par Nikolaï Talanov
12 novembre 2015

Curseur rotatif de preuve de concept. Utilise un chemin de clip et beaucoup de mathématiques.
Réalisé par Tyler Johnson
16 avril 2015

Un simple curseur CSS et jQuery plein écran utilisant la fluidité de TranslateX et Translate3D !
Réalisé par Joseph
19 août 2014

Curseurs réactifs

À propos du code

Curseur d’opacité des images

Curseur d'opacité des images en HTML et CSS.

Navigateurs compatibles : Chrome, Edge, Firefox, Opera, Safari

Réactif : oui

Dépendances : -

À propos du code

Disposition des diapositives flexibles empilées

Cet exemple illustre comment créer une disposition de diapositives empilées les unes sur les autres (particulièrement utile pour les transitions de fondu entrant/sortant). Ceci est réalisé sans régler leur hauteur et en évitant la position : absolue ; ils sont donc entièrement flexibles et faciles à maintenir dans le flux normal des pages.

Navigateurs compatibles : Chrome, Edge, Firefox, Opera, Safari

Réactif : oui

Dépendances : -

À propos du code

Curseur réactif

Curseur réactif animé en HTML, CSS et JavaScript.

Navigateurs compatibles : Chrome, Edge, Firefox, Opera, Safari

Réactif : oui

Dépendances : animer.css

À propos du code

Curseur avec texte masqué

Curseur CSS uniquement avec texte masqué.

Navigateurs compatibles : Chrome, Edge (partiel), Firefox, Opera, Safari

Réactif : oui

Dépendances : -

À propos du code

Image et contenu avec effet parallaxe.

À propos du code

Galerie de diapositives CSS uniquement.

Navigateurs compatibles : Chrome, Edge, Firefox, Opera, Safari

Réactif : oui

Dépendances : -

À propos du code

Curseur HTML/CSS pur

Curseur HTML/CSS pur avec barre de progression SVG circulaire.

Navigateurs compatibles : Chrome, Edge (partiel), Firefox (partiel), Opera, Safari

Réactif : oui

Dépendances : font-awesome.css

À propos du code

Une expérience pour créer un curseur vertical entièrement réactif avec des vignettes en utilisant uniquement CSS et en conservant le rapport hauteur/largeur des images.

À propos du code

Un simple curseur/carrousel d'image Flexbox réalisé avec du JavaScript vanille.

À propos du code

Il s'agit d'une expérience qui simule un effet de flou de mouvement à chaque changement de diapositive. Il tire parti du filtre Flou gaussien SVG et de certaines animations d'images clés CSS. Bien que l'effet ne nécessite aucun Javascript pour fonctionner correctement, dans cet exemple, Javascript n'est utilisé que pour la fonctionnalité du curseur.

À propos du code

Cool anime le curseur avec JS.

À propos du code

Il s'agit d'une expérience sur la façon dont les modèles SVG peuvent nous aider à créer des images de type masqué pour un curseur d'image CSS uniquement.

Explorer quelques transitions de curseur. Curseur Swiper avec option de parallaxe activée. Jouer avec les filtres CSS principalement ici.
Réalisé par Mirko Zorić
12 juin 2017

Curseur GSAP simple avec quelques animations subtiles.
Réalisé par Goran Vrban
9 juin 2017

Interface utilisateur du curseur avec HTML, CSS et JavaScript.
Réalisé par Mergim Ujkani
6 juin 2017

Curseur GSAP version 2.
Réalisé par Em An
4 mai 2017

Un petit curseur de transition tranché utilisant un simple accord d'ajout de classe. Il faut lisser un peu les timings et décider de la meilleure approche pour mobile (il suffit d'empiler, d'ajouter des événements tactiles, de créer une fenêtre d'affichage complète des images, etc. Prend en charge la molette de défilement (scroll jacking), les boutons de navigation et les touches fléchées. Peut également augmenter le wrapper de contenu pour que les images remplissent la fenêtre dans leur état non animé, ce qui est plutôt cool aussi.
Réalisé par Stephen Scaff
3 janvier 2017

Utilisation de la bordure-image et du chemin de clip CSS pour créer un effet d'animation de curseur.
Réalisé par Emily Hayman
31 décembre 2016

Petit slider construit avec flexbox. Un peu réactif et peut avoir des éléments fixes à côté de la zone du curseur.
Réalisé par Robert
28 novembre 2016

Curseur de canevas HTML, CSS.
Réalisé par Nvagelis
29 octobre 2016

Curseur fluide 3D HTML, CSS et JavaScript.
Réalisé par Eduardo Allegrini
19 octobre 2016

Slider de cupcake HTML et CSS avec des pépites !
Réalisé par Jamie Coulter
14 octobre 2016

Réalisé par Mario's Maselli
12 octobre 2016

Explorer l'animation de l'interface utilisateur n°2 avec HTML, CSS et JavaScript.
Réalisé par Mario's Maselli
22 septembre 2016

Explorer l'animation de l'interface utilisateur n°3 avec HTML, CSS et JavaScript.
Réalisé par Mario's Maselli
22 septembre 2016

Ecommerce Slider v2.0 avec HTML, CSS et JavaScript.
Réalisé par Pedro Castro
17 septembre 2016

Curseur HTML, CSS et JavaScript propre avec un arrière-plan incurvé.
Réalisé par Ruslan Pivovarov
13 septembre 2016

Explorer l'animation de l'interface utilisateur n°1 avec HTML, CSS et JavaScript.
Réalisé par Mario's Maselli
8 septembre 2016

Profitez de la puissance du CSS : haut et bas de chaque image du milieu et curseur paginé avec lightbox.
Réalisé par Kseso
15 août 2016

La double exposition est une technique photographique qui combine 2 images différentes en une seule.
Réalisé par Misaki Nakano
3 août 2016

Curseur utilisant le clip de propriété CSS3.
Réalisé par Pedro Castro
1er mai 2016

Curseur CSS réactif.
Réalisé par geekwen
19 avril 2016

Il s'agit d'une simple expérience de curseur affichant des mots avec de belles significations qui ne peuvent pas être directement traduits. Focus : typographie élégante et transitions simples mais séduisantes.
Réalisé par Joe Harry
5 avril 2016

L'idée de l'animation est de changer la valeur du chemin du clip CSS, créant ainsi un effet de masquage.
Réalisé par Bhakti Al Akbar
31 mars 2016

Curseur de points avec HTML, CSS et JavaScript.
Réalisé par Derek Nguyen
16 mars 2016

Curseur d'effet prisme avec HTML, CSS et JavaScript.
Fabriqué par Victor
12 mars 2016

Galerie d'arrière-plans coulissants avec HTML, CSS et JavaScript.
Réalisé par Ron Gierlach
30 novembre 2015

Solution de curseur HTML, CSS et JavaScript.
Réalisé par Jürgen Genser
30 septembre 2015

Un curseur de produit alimenté par Sequence.js. Sequence.js - Le framework d'animation CSS réactif pour créer des curseurs, des présentations, des bannières et d'autres applications uniques par étapes.
Réalisé par Ian Lunn
15 septembre 2015

Curseur personnalisé en petit cercle.
Réalisé par Bram de Haan
11 août 2015

Curseur GTA V réactif avec HTML, CSS et JavaScript.
Réalisé par Eduard Mayer
24 janvier 2014

C'est comme un curseur mais il tourne de manière cubique pour des raisons inconnues.
Réalisé par Eric Brewer
4 décembre 2013

Réalisé par Hugo DarbyBrown
28 août 2013

Curseurs simples

Curseur de superposition d'images avec HTML, CSS et JavaScript Vanilla.
Fabriqué par Yugam
7 juin 2017

Curseur d'image en vedette HTML et CSS.
Réalisé par Joshua Hibbert
16 juin 2016

Curseur d'image multi-axes

Curseur d'image multi-axes avec HTML, CSS et JavaScript.
Fabriqué par Burak Can
22 juillet 2013

Cube slider, une petite expérience avec les transformations 3D HTML5/CSS3.
Réalisé par Ilya K.
26 juin 2013

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 de nombreuses photos dans publications individuelles ou des pages. Le code du slider peut être librement utilisé et modifié selon vos besoins.

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

Slick – plugin de curseur de carrousel moderne

Nappe est un plugin jquery distribué gratuitement dont les développeurs affirment que leur solution satisfera toutes vos exigences en matière de slider. Curseur adaptatif – le carrousel peut fonctionner dans « carrelage"pour les appareils mobiles, et, dans le " glisser-déposer"pour la version de bureau.

Contient un effet de transition " atténuation», 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.

Owl Carousel 2.0 – jQuery – plugin prenant en charge l'utilisation 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 - les principales caractéristiques.

Prise en charge des fonctionnalités glisser-déposer 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.

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.

AnoSlide – Curseur jQuery réactif ultra compact

Ultra-compact curseur jQuery– un carrousel dont la fonctionnalité est bien supérieure à celle d’un slider classique. Ceux-ci incluent un aperçu d'une seule image, un affichage carrousel de plusieurs images et un affichage par curseur basé sur le titre.

Carrousel Chouette – Curseur Jquery – carrousel

– curseur avec support écrans tactiles et la technologie glisser-déposer, facilement intégrable dans HTML– coder. Le plugin est l'un des meilleurs curseurs qui vous permettent de créer de magnifiques carrousels sans aucun balisage spécialement préparé.

Galerie 3D – carrousel

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

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.

Carrousel utilisant bootstrap

Responsive Slider – Carrousel utilisant la technologie idéale pour votre nouveau site Web.

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 les sites Web de tout type.

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. Petit cercle présenté comme une alternative aux autres curseurs de ce type. Support intégré disponible systèmes d'exploitation IOS Et Androïde.

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

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.

Wow – slider – carrousel

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

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.

jCarrousel - jQuery un plugin qui vous aidera à 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.

Scrollbox – plugin jQuery

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

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.

Flexisel : plugin de curseur de carrousel JQuery réactif

Les créateurs se sont inspirés d'un plugin à l'ancienne et en ont fait une copie visant à garantir le bon fonctionnement du curseur sur les appareils mobiles et les tablettes.

Une mise en page réactive, lorsqu'elle est exécutée sur des appareils mobiles, est différente d'une mise en page orientée en fonction de la taille de la fenêtre du navigateur.

parfaitement adapté au travail sur écrans, aussi bien en basse qu'en haute résolution.

Elastislide – curseur adaptatif – carrousel

S'adapte parfaitement à la taille de l'écran de l'appareil. Vous pouvez définir le nombre minimum d'images à afficher à une résolution spécifique. Fonctionne bien comme curseur de carrousel avec des galeries d'images, en utilisant un wrapper fixe avec un effet de défilement vertical. Curseur disponible gratuitement à partir de Thèmes Woo

. 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.

Carrousel incroyable Carrousel incroyable – curseur d'image adaptatif activé jQuery . Prend en charge de nombreux systèmes de gestion de contenu tels que, WordPress Et Drupal Joomla Androïde Et IOS. Prend également en charge

et les versions de bureau des systèmes d'exploitation 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.

Dans ce tutoriel, nous allons créer une simple page d'en-tête responsive décorée d'un carrousel où les images glissent de droite à gauche. Notre solution n'utilise pas JavaScript, le diaporama est basé sur des animations CSS3, qui sont supportées dans la plupart des navigateurs modernes : Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ et IE10.

Étape 1 - Préparatoire Nous aurons besoin de 4 grandes images (dans notre exemple, la taille est de 1200px x 390px). Pour un slider horizontal, nous allons préparer une image de 4800px x 390px dans Photoshop, placer toutes nos images les unes après les autres horizontalement et enregistrer le résultat dans un format adapté au web («”).

slider-horizontal.jpg

Étape 2 - HTML

L'île de Batz

Bars et restaurants

Nous allons commencer à définir des styles pour les appareils mobiles. Définissons la conception de base, puis ajoutons des extensions de modèle pour les écrans plus grands. Le texte de la leçon ne fournit que les propriétés de base ; le code complet peut être consulté dans le code source :

Corps (largeur : 90 % ; largeur min : 300 px ; largeur maximale : 1 200 px ; marge : 0 auto ; remplissage supérieur : 1em ; couleur : #504331 ) en-tête (alignement du texte : centre ; position : relative ; ) h1 ( taille de la police : 2,75 em ; fond : blanc ; remplissage : 0 10px ; marge en bas : 0,25 em ; bordure en haut : 1 px solide #504331 ; ; images/map.png) en bas au centre sans répétition ; padding-bottom : 177px )

Étape 4. Styles pour grands écrans

Sections sur grands écrans .principal Et .écran devrait être affiché différemment. Section .lien aura une largeur de 300 px et sera positionné comme la barre latérale droite, et la section .principal restera à gauche. Nous ajouterons également une double ligne pour séparer les sections. Nous déterminerons une largeur d'écran supérieure à 1024px à l'aide de la requête @media :

Écran @media uniquement et (largeur minimale : 1024 px) ( .content ( position : relative ; ) .main ( margin-right : 320px ; remplissage : .5em 20px .5em 0 ; /*ajouter une double ligne */ border-right : 1px solide #504331 ; ombre de la boîte : 2px 0 blanc, 3px 0 #504331 ;

Étape 5 : Images d'en-tête réactives

Commençons par travailler sur la partie principale de notre leçon : un curseur CSS réactif dans l'en-tête. Tout d’abord, rendons l’image d’arrière-plan réactive.

En-tête (arrière-plan : url(../images/slider-horizontal.jpg) 0 répétition inférieure x ; taille de l'arrière-plan : 400 % ; remplissage inférieur : 32,5 % ; )

En utilisant deux valeurs de pourcentage (400 % pour la propriété taille de l'arrière-plan et 32,5% pour la marge inférieure), le fond d'en-tête s'affichera correctement quelle que soit la taille de l'écran.

Pourquoi 400% ? Nous avons 4 diapositives, donc l'affichage sera 1/4 de l'image d'arrière-plan dans l'en-tête. Autrement dit, la taille de l’arrière-plan doit être 4 fois plus large que l’en-tête.

Pourquoi 32,5% ? Nous positionnons notre arrière-plan en bas de l'en-tête. La hauteur de l'image d'arrière-plan est de 390 px, la largeur de la diapositive individuelle est de 1 200 px, 390/1 200 = 0,325, donc la hauteur est de 32,5 % de la largeur.

Étape 6. Animation

Nous animerons la propriété position d'arrière-plan. Pour afficher la deuxième propriété d'image position d'arrière-plan devrait avoir de l'importance 33,33333% bas, troisième - 66,66667% bas, et le quatrième - 100% bas. La première image s'affiche lorsque la valeur de la propriété est position d'arrière-planégal 0 bas ou 133,33333% bas(nous définissons les répétitions sur répéter-x).

Chaque image dispose de 25 % du temps de « renommée ». Le premier est affiché de 0 à 25 %, le deuxième de 25 % à 50 %, le troisième de 50 % à 75 % et le dernier de 75 % à 100 %. Nous définissons les transitions de manière à ce que l'image commence à glisser un peu plus tôt (en utilisant une valeur de 5 %) avant que 25 % de son temps de rendu ne se soient écoulés. Voilà à quoi ça ressemble @keyframes:

@keyframes h_slide ( 0% (position d'arrière-plan : 0 % en bas ; ) 20 % (position d'arrière-plan : 0 % en bas ;) 25 % (position d'arrière-plan : 33,33333 % en bas ;) 45 % (position d'arrière-plan : 33,33333 % en bas ; ) 50 % (position d'arrière-plan : 66,66667 % en bas ; ) 70 % (position d'arrière-plan : 66,66667 % en bas ; ) 75 % (position d'arrière-plan : 100 % en bas ; ) 95 % (position d'arrière-plan : 100 % en bas ; ) 100 % (position d'arrière-plan : 133,33 % en bas ; ) )

Veuillez noter que vous devez ajouter les préfixes du navigateur : @-webkit-keyframes (pour Chrome, Safari, iOS Safari, Android) et @-moz-keyframes (pour Firefox 15).

Vous trouverez ci-dessous le code d'en-tête complet. Notre animation « h_slide » se répète toutes les 24 secondes (6 secondes par diapositive) dans une boucle sans fin. La fonction temporelle est importante facilité, de sorte que chaque diapositive ralentisse à la fin de la transition.

En-tête (alignement du texte : centre ; position : relative ; arrière-plan : url(../images/slider-horizontal.jpg) 0 répétition en bas-x ; taille de l'arrière-plan : 400 % ; remplissage-bas : 32,5 % ; -webkit- animation : h_slide 24 s facilité de sortie infinie ; -moz-animation : h_slide 24 s facilité de sortie infinie ; animation : h_slide 24 s facilité de sortie infinie)

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 curseurs jquery adaptatifs, 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 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 en taille fixe et adaptatif, 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 en 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

Simple curseur gratuit-galerie avec chargement d'images.

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 le 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 diapositive par diapositive.

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 utilisant CSS3 et jQuery

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