Le curseur jquery est réactif. Faire un slider jQuery simple Curseur d'image jQuery et description

De l'auteur : malgré les rumeurs sur la prétendue "mort" de la partie des pages web visible sans défilement, le besoin d'un bon slider n'a disparu nulle part. Soyons honnêtes une seconde - les curseurs sont amusants. De plus, rien d'autre, contrairement au contenu en mouvement, ne provoque un effet "wow" chez l'utilisateur. Tous les curseurs sont un ensemble de plusieurs diapositives qui se remplacent et il est extrêmement important que le code du curseur soit le plus léger possible. C'est là que jQuery devient utile.

Jetez un œil aux 20 curseurs jQuery d'Envato Market et vous verrez qu'il existe des curseurs qui sont plus qu'un simple bloc de curseurs.

1. RoyalSlider - Galerie d'images à écran tactile avec jQuery

Désormais, un curseur réactif qui est également compatible avec les écrans tactiles signifie beaucoup plus qu'auparavant. RoyalSlider combine les deux fonctionnalités : adaptabilité et travail avec des écrans tactiles. Un bon choix car la galerie est écrite en HTML5 et CSS3.

Quelques fonctionnalités intéressantes :

JavaScript. Départ rapide

Optimisation du référencement

Haute personnalisation

Plus de 10 modèles de démarrage

Il existe une solution de repli pour les transitions CSS3

À mon avis, la fonctionnalité la plus intéressante est «l'architecture de script modulaire», qui vous permet de désactiver les éléments inutiles du fichier JS principal, réduisant ainsi le poids. RoyalSlider, une galerie d'images à écran tactile jQuery, est un curseur JavaScript robuste qui devrait être un incontournable pour la boîte à outils de tout développeur.

2. Plug-in jQuery réactif Slider Revolution

Ce n'est pas facile de faire quelque chose de "révolutionnaire" avec un slider. En ce qui concerne les curseurs, il y a tellement de fonctionnalités que vous pouvez leur ajouter. Cependant, Slider Revolution est un très bon essai. Parmi les curseurs jQuery, cette instance répond à toutes vos exigences possibles.

La liste des fonctionnalités de curseur est si longue, je ne listerai donc que les meilleures :

Effet de parallaxe et animation personnalisée

Couches et diapositives illimitées avec des liens

styles prêts à l'emploi et profondément personnalisables

et beaucoup plus

La possibilité d'ajouter une image, un lecteur vidéo intégré et des liens de médias sociaux fait de Slider Revolution l'une des options les plus flexibles et personnalisables sur le Web.

3. Plug-in de curseur jQuery réactif LayerSlider

Le titre "LayerSlider Responsive jQuery Slider Plugin" ne rend pas vraiment justice à ce slider.
Plus de 200 transitions de diapositives 2D et 3D feront tourner la tête de n'importe qui.

Quelques caractéristiques notables :

13 skins et 3 types de menus

Possibilité de placer une image fixe au-dessus du curseur

Et jQuery de secours

Et beaucoup plus

Comme avec le curseur précédent, presque tous les contenus peuvent être ajoutés, même le contenu multimédia résident HTML5. Le LayerSlider donne vie aux curseurs et est également très joli.

4. Rotateur de bannière jQuery / Diaporama

jQuery Banner Rotator / Slideshow est un curseur assez simple qui ne sacrifie aucune des fonctionnalités de base.

Opportunités:

Info-bulles, insertions de texte, etc.

Aperçu et diverses options de visualisation des composants

Minuterie avec un délai pour un curseur ou pour tous

Transitions multiples pour toutes les diapositives ou transitions différentes pour chacune individuellement

jQuery Banner Rotator / Slideshow n'a que des fonctionnalités de base par rapport aux autres curseurs jQuery, mais vous ne devez pas l'oublier.

5. Curseur tout-en-un - Plugin de curseur jQuery réactif

Tout curseur qui apparaît sur le Web a sa propre vision unique et résout tous les problèmes dans son domaine. Mais pas celui-ci. All In One Slider peut être appelé "tout compris".

Je pense que la plupart des développeurs et concepteurs Web ont une solution éprouvée, mais ils sont toujours à la recherche de quelque chose de nouveau. Et ce "quelque chose de nouveau" comprend :

Rotateur de bannière

bannière de prévisualisation

Bannière de la liste de lecture

Curseur de contenu

Carrousel

Tous les types de curseurs prennent en charge la plupart, sinon la totalité, des fonctionnalités requises par les curseurs jQuery. All In One Slider sera-t-il votre All Inclusive ?

6. UnoSlider - Curseur tactile réactif

Si votre curseur ne répond pas et ne prend pas en charge les écrans tactiles, vous avez le mauvais curseur. UnoSlider est correct.

Ce slider a su trouver sa place au soleil entre simplicité et richesse fonctionnelle. Les fonctions:

Prise en charge du thème

12 thèmes prédéfinis

40 transitions

Prise en charge d'IE6+

Toutes les fonctionnalités axées sur la conception et le style font d'UnoSlider un excellent curseur de contenu avec la possibilité d'ajouter des thèmes.

7. Master Slider - Curseur d'écran tactile jQuery

Vous recherchez "un curseur jQuery pour les gouverner tous" ? Essayez Master Slider - curseur d'écran tactile jQuery pour différentes tailles d'écran…

En matière de bonne conception, cet exemple est l'un des meilleurs :

Plus de 25 modèles

Transitions matériellement accélérées

Prise en charge du toucher et du balayage

Et beaucoup plus

Les transitions interactives, les calques animés et les points chauds attireront certainement votre attention. Master Slider est une œuvre d'art.

8. TouchCarousel - défileur et curseur de contenu jQuery

TouchCarousel attire avec une assistance et des mises à jour gratuites. Cependant, ce ne sont pas toutes les fonctionnalités de ce curseur de carrousel jQuery léger.

Si le nom contient le mot "touch", vous pouvez deviner que le curseur est entièrement réactif et prend en charge le toucher. Autres caractéristiques:

Optimisation du référencement

Lecture automatique intelligente

Transitions accélérées par le matériel CSS3

Interface utilisateur personnalisable et 4 skins pour Photoshop

TouchCarousel, en raison de son défilement physique unique des diapositives, offre un tout nouveau niveau d'expérience sur les appareils mobiles.

9. Curseur avancé - Curseur jQuery XML

Les curseurs jQuery peuvent être utilisés pour plus que des sites Web. Ils peuvent également être utiles dans les applications Web. Le curseur avancé vous permet de le faire.

Avec le balisage HTML ou XML, ce curseur avancé fait une impression durable :

Calques animés et vidéo intelligente

Plus de 100 transitions et plus de 150 propriétés personnalisées

15 skins de curseur, 7 skins de barre de défilement et prise en charge native de la lightbox

Navigation au clavier, prise en charge tactile et personnalisation complète

Et beaucoup plus

Cependant, la meilleure fonctionnalité est le curseur avancé, l'API jQuery XML Slider, qui fait du curseur le choix parfait pour votre application Web.

10. Effet de zoom avant/arrière jQuery Slider entièrement réactif

Un de ces curseurs jQuery qui vous donnera envie de regarder une démo avant de commencer à lire sur ses fonctionnalités. Vous voulez juste comprendre ce que signifie cet "effet de zoom avant/arrière".

L'effet de zoom est plutôt faible, mais il ajoute un sentiment de contrôle et une vraie touche à l'image tandis que le reste du curseur est statique. Caractéristiques du curseur :

Transitions de couches CSS3

Option de fin d'animation pour les calques

Options de largeur fixe, plein écran et pleine largeur

Texte animé avec formatage HTML et CSS

La plupart des curseurs essaient d'intégrer autant d'effets que possible, et l'effet jQuery Slider Zoom In/Out Fully Responsive n'a qu'un effet Ken Burns, mais il est bien implémenté.

11. Évolution du carrousel jQuery

Comme le curseur avancé susmentionné - jQuery XML Slider, jQuery Carousel Evolution possède sa propre API qui peut être utilisée pour améliorer les fonctionnalités ou intégrer le curseur dans un autre projet.

JavaScript. Départ rapide

Apprenez les bases de JavaScript avec un exemple pratique de création d'une application Web

Avec les images, le balisage HTML, les vidéos YouTube et Vimeo, vous obtenez également :

Optimisation du référencement

9 styles de carrousel

Effets d'ombre et de réflexion

La taille de l'image peut être ajustée, à l'avant et à l'arrière

jQuery Carousel Evolution est un carrousel simple avec de nombreuses utilisations.

12 Curseur sexy

Sexy Slider n'est plus aussi sexy qu'avant. Cependant, en raison de son âge, ce curseur est digne de confiance.

A première vue, le slider n'est pas très impressionnant, mais s'il est bien configuré, il s'intégrera parfaitement à votre design. Opportunités:

Diapositives en lecture automatique

Légendes des images

Lecture continue des diapositives

6 effets de transition

Sexy Slider vous attend pour libérer toute sa puissance et libérer son potentiel.

13. JQuery Image & Content Scroller avec Lightbox

Avec toutes ces conceptions adaptées aux mobiles et la prise en charge de l'écran tactile, il est agréable de voir un curseur jQuery qui n'a pas oublié le bureau.

jQuery Image & Content Scroller w/ Lightbox prend en charge la saisie au clavier et la molette de la souris, entre autres fonctionnalités :

Orientation horizontale et verticale

Légendes de texte à l'intérieur ou à l'extérieur du curseur

Possibilité de définir un certain nombre de diapositives visibles à la fois

Images en ligne, Flash, iframe, Ajax et contenu en ligne

Le curseur a également une lightbox intégrée. En option, dans jQuery Image & Content Scroller w/ Lightbox, vous ne pouvez pas lancer le curseur lui-même, mais lancer la lightbox séparément.

14. Translucide - Rotateur / Curseur de bannière réactif

La plupart des curseurs jQuery ont leur propre design. Vous pouvez le personnaliser pour vous-même, mais parfois vous voulez juste que tout soit à l'intérieur du curseur. Votre attention est représentée par Translucent.

Le curseur a beaucoup de préréglages. Vous devrez peut-être simplement définir certains paramètres et c'est tout. Opportunités:

6 modèles différents

4 effets de transition

2 transitions par balayage

Boutons et étiquettes personnalisables

Comme d'autres, ce curseur est tactile, réactif et accéléré par le matériel. Translucent est un curseur au design minimaliste qui met le contenu lui-même au premier plan.

15. FSS - Plugin de site Web coulissant plein écran

Voulez-vous créer un site plein écran avec des diapositives ? Ensuite, vous avez besoin de FSS.

En fait, il est extrêmement facile de créer un site de curseur plein écran à l'aide de ce curseur jQuery. Opportunités:

Prise en charge d'AJAX

Barre de défilement

Prise en charge de la technologie de liens profonds

2 effets de transition différents

Il convient également de prêter attention à la prise en charge du clavier et à un guide de 11 pages. Cependant, la vraie impression est le poids du FSS, seulement 5Ko.

16. Zozo Accordion - Curseur d'écran tactile réactif

Un autre exemple de curseur jQuery axé sur le style qui fait bien le travail. Zozo Accordion est un must pour tous ceux qui recherchent un bon curseur d'accordéon avec la possibilité de changer de style.

Cette beauté d'animation CSS3 possède également un assez large éventail de fonctionnalités :

Accordéon horizontal et vertical

HTML5 sémantique et optimisation SEO

Prise en charge du tactile, du clavier et de WAI-ARIA

Plus de 10 skins et 6 mises en page

Et beaucoup plus

Zozo Accordion propose une assistance gratuite et des mises à jour constantes, ainsi que toutes les fonctionnalités que vous souhaitez voir dans un accordéon jQuery.

17.jQuery Responsive OneByOne Slider Plugin

jQuery Responsive OneByOne Slider Plugin ressemble plus à une simple animation qu'à un slider. Au lieu d'afficher une diapositive à la fois, cette instance remplit progressivement l'écran de diapositives jusqu'à ce qu'il n'y ait plus de place dans la zone avant de passer à la diapositive suivante.

L'animation CSS3 fonctionne à partir d'Animate.css, elle est légère, comporte plusieurs couches et est adaptée aux mobiles. Fonctionnalités multiples :

Il existe également une option de navigation par glisser-déposer. Le plugin jQuery Responsive OneByOne Slider est alimenté par le carrousel Twitter Bootstrap.

18. Accordéonza - Plugin jQuery

Il n'y a pas de curseur jQuery plus facile que cela. Il ne faut que 3 Ko de curseur pour fonctionner, ce qui fait d'Accordionza le curseur de type accordéon le plus léger.

Si vous n'aimez pas les trois options de style, vous pouvez modifier vous-même le HTML et le CSS. Opportunités:

Navigation au clavier

Effets et boutons faciles à personnaliser

Technique d'amélioration progressive - fonctionne sans JavaScript

Gardez à l'esprit qu'Accordionza peut afficher de nombreuses variantes de contenu mixte, ce qui le rend extrêmement flexible.

19. mightySlider - Curseur polyvalent réactif

MightySlider est un curseur vraiment puissant. Il peut être utilisé non seulement comme un simple curseur d'image, mais également comme un curseur unidirectionnel plein écran avec navigation dans les éléments de menu. Avec lui, vous pouvez créer un excellent site Web d'une page.

Sous le capot vous trouverez de nombreuses options :

Prise en charge du clavier, de la souris et du tactile

Transitions accélérées par le matériel CSS3

Nettoyer le balisage valide et l'optimisation SEO

Diapositives, calques de sous-titres et effets illimités

L'API est très puissante et conviviale pour les développeurs, ce qui ouvre une variété de façons de l'utiliser. MightySlider est un excellent slider jQuery progressif avec un code propre et bien commenté.

20. Curseur de parallaxe - Plugin jQuery réactif

Parallax Slider fonctionne comme le plugin jQuery Responsive OneByOne Slider et vous permet d'animer chaque calque séparément dans la même diapositive. Vous pouvez animer toutes les diapositives ou même une seule en ajoutant une animation de parallaxe.

Le kit est livré avec 4 curseurs de types différents, tous avec un effet de parallaxe. Comme les autres curseurs jQuery, il a :

Personnalisation complète

Prise en charge tactile

Couches entièrement réactives et illimitées

Lecture automatique, boucle, réglage de la hauteur et de la largeur et minuterie

Les calques animés ne sont pas que du texte ou des images. Vous pouvez également ajouter des vidéos YouTube, Vimeo et HTML5. Parallax Slider est un autre bon exemple de la façon dont vous pouvez simuler les effets Flash encore mieux que Flash lui-même, qui est également pris en charge sur tous les appareils.

Conclusion

Il est intéressant de voir comment les curseurs jQuery sont passés de quelque chose qui remplace simplement une image par une autre à un vaste ensemble d'outils créatifs. Il existe maintenant des curseurs 3D, des curseurs de parallaxe, des curseurs pleine page, des curseurs réactifs et ceux qui peuvent être visualisés sur les ordinateurs de bureau et les smartphones.

Si vous n'aimez aucun des curseurs de cette liste, vous pouvez toujours suivre le didacticiel jQuery Code sur Envato et développer quelque chose de complètement nouveau et unique.

Ou consultez les autres curseurs sur Envato Market parmi lesquels choisir. Quel est votre slider jQuery préféré et pourquoi ?

Le curseur fait défiler horizontalement les images disposées en ligne. Les images doivent être de la même taille. Le défilement des images se fait automatiquement ou à l'aide des boutons avant et arrière. Un exemple de ce qui se passe en conséquence peut être vu dans l'exemple ci-dessous.

Ce curseur est très facile à installer. comme d'habitude, vous devez suivre plusieurs étapes pour implémenter des scripts et des codes afin d'obtenir le résultat souhaité.

Code HTML

À l'endroit où vous souhaitez afficher le slider lui-même, vous devez ajouter le code HTML de notre futur slider.

• sl_ctr- le conteneur principal du slider, qui contient tous les éléments du slider.
• sldr- conteneur avec des images. à l'intérieur duquel se trouvent 4 images. Vous pouvez publier autant d'images que vous le souhaitez.
• prv_b- bouton pour déplacer les diapositives vers l'arrière.
• nxt_b- bouton pour faire avancer les diapositives.

Styles CSS

Sl_ctr( position : relative ; largeur : 450 px ; hauteur : 300 px ; débordement : masqué ; ) .sldr( position : relative ; largeur : 10 000 px ; hauteur : 300 px ; ) .sldr img( float : gauche ; ) .prv_b, .nxt_b( position : absolue ; haut : 135 px ; affichage : bloc ; largeur : 35 px ; hauteur : 35 px ; curseur : pointeur ; ) url(images/prv.png) non-répété ; ) .nxt_b( droite :10px ; arrière-plan :url(images/nxt.png) non-répété ; )

• sl_ctr- on donne à notre container les dimensions du slider, en l'occurrence 450 pixels de large et 300 pixels de haut. Le paramètre overflow:hidden est également défini, pour recadrer tout ce qui dépasse les limites de ce conteneur. Dans notre cas, ce sont des images qui sont situées sur une seule ligne.
• sldr- nous définissons une grande largeur de 10000 pixels pour le conteneur avec des images, afin que nous puissions adapter toutes les images, peu importe leur nombre. la hauteur est également fixée, comme le conteneur principal, à 300 pixels.
• sldr img- nous appuyons sur toutes les images vers la gauche pour qu'elles deviennent alignées.
• .prv_b, .nxt_b- nous définissons des styles communs pour les boutons de contrôle, puis pour chacun séparément.

Connexion de scripts

Eh bien, le script lui-même, qui animera et contrôlera le curseur. En utilisant les instructions, vous pouvez également le connecter de manière pratique.

Eh bien, analysons les paramètres de base du script.

• varsldr = $(".sldr")- nous définissons une variable de notre conteneur pour les images. Si vous modifiez le nom de la classe, faites-le très soigneusement afin qu'ils correspondent à la fois en HTML et CSS et dans le script.
• slideWidth = $(".sl_ctr").outerWidth()- définir la largeur de notre slider.
• slideCount = $(".sldrimg").length- déterminer le nombre de diapositives, c'est-à-dire combien vous en avez ajouté au code des images.
• prv_b = $(".prv_b")- nous définissons un bloc avec un bouton de retour, des curseurs.
• prv_b = $(".nxt_b")- nous définissons un bloc avec un bouton avant, des curseurs.
• sldrInterval = 3300- le temps d'affichage d'une image. 3,3 secondes
• animateTime = 1000- temps d'animation, changement de diapositive. 1 seconde.
• cours = 1- sens de glissement. Dans ce cas, les images sont décalées vers la gauche, nous montrant celles qui sont situées à droite. Si vous définissez la valeur sur -1, la direction changera.
• marge = - slideWidth ;- décalage initial de la glissière.

De plus, le curseur arrête son animation si vous le survolez.

Si tout est fait et configuré correctement, le curseur devrait déjà fonctionner sur votre site. Le matériel n'est pas compliqué, vous pouvez le personnaliser pour vous-même et des tâches spécifiques sur le site, et ce curseur vous ravira, vous et vos visiteurs.

C'est tout, merci pour votre attention. 🙂

Un curseur simple et léger (compressé de 21 Ko) écrit en Javascript pur sans dépendances, c'est-à-dire fonctionne sans jQuery.

Testé dans les navigateurs suivants :

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• IE10
• Opéra 16.0

La prise en charge d'IE8/9 est incomplète (aucun effet).

Particularités

• Vous pouvez ajouter un nombre illimité de curseurs à la page, voire les placer les uns dans les autres.
• Redimensionne en fonction du contenu, mais peut être désactivé.
• Navigation au clavier - lorsque le curseur est sur un curseur, il est possible de changer de curseur avec des flèches.
• Prise en charge des événements tactiles mobiles.

Lien

Avant de fermer la balise

besoin de se connecter curseur.js ou curseur.min.js déposer.

Balisage HTML

curseur.js peut fonctionner avec n'importe quel élément inline , inline-block , block qui a un attribut id . Vous pouvez utiliser n'importe quel élément enfant de premier niveau avec l'attribut data-slidr, par exemple :

• Pomme
• banane
• noix de coco

javascript

Après connexion curseur.js l'objet curseur global devient disponible. Le moyen le plus simple de créer un curseur est :

Slidr.create("slidr-id").start();

Appel avec tous les paramètres :

Slidr.create("slidr-id", ( après : function(e) ( console.log("in : " + e.in.slidr); ), avant : function(e) ( console.log("out : " + e.out.slidr); ), fil d'Ariane : vrai, contrôles : "coin", direction : "vertical", fondu : faux, clavier : vrai, débordement : vrai, thème : "#222", timing : ( " cube": "0.5s easy-in" ), toucher : vrai, transition : "cube" )).start();

Réglages

Tous les paramètres disponibles pour slidr.js sont répertoriés dans le tableau ci-dessous.

Paramètre	Un type	Par défaut	La description
après	une fonction		rappel après changement de diapositive
avant de	une fonction		fonction de rappel avant le changement de diapositive
chapelure	bourdonner	faux	Afficher le fil d'Ariane pour gérer vos diapositives. vrai ou faux .
contrôles	chaîne de caractères	frontière	L'emplacement des flèches pour contrôler les diapositives. bordure , coin ou aucun .
direction	chaîne de caractères	horizontal	La direction par défaut pour les nouvelles diapositives. horizontal ou h , vertical ou v .
disparaître	bourdonner	vrai	Activer l'effet de fondu entrant/sortant pour les transitions de diapositives. vrai ou faux .
clavier	bourdonner	faux	Activez le changement de diapositives à l'aide du clavier. vrai ou faux .
débordement	bourdonner	faux	Activer le débordement pour le bloc curseur. vrai ou faux .
pause	bourdonner	faux	Ne changez pas automatiquement les diapositives au survol de la souris (nécessité d'exécuter auto()). vrai ou faux .
thème	chaîne de caractères	#fff	La couleur des commandes du curseur (fil d'Ariane et flèches). #hexcode ou rgba(valeur) .
Horaire	objet	{}	Timings d'animation personnalisés à appliquer. ("transition": "synchronisation") .
toucher	bourdonner	faux	Activez le contrôle tactile sur les appareils mobiles. vrai ou faux .
transition	chaîne de caractères	linéaire	Effet de transition de diapositive. cube , linear , fade ou none .

Les rappels après et avant reçoivent les données suivantes :

( id : "slidr-id", dans : ( el : # , slidr : "data-slidr-in", trans : "transition-in", dir : "direction-in" ), out : ( el : # , slidr : "data-slidr-out", trans : "transition-out", dir : "direction-out" ) )

API globale Slider.js

L'espace de noms global slidr fournit les fonctionnalités suivantes :

/** * Version actuelle * @return (chaîne) major.minor.patch. */fonctionversion())(); /** * Effets de transition disponibles. * @return (tableau) de transitions. */ fonction transitions() (); /** * Crée et renvoie un Slidr. * Appeler cette fonction deux fois sur le même élément renverra l'objet Slidr déjà créé. * ID d'élément @param (chaîne) pour Slidr. * @param (Object=) opt_settings Paramètres du curseur. */ function create(id, opt_settings) ();

API de curseur

// Initialise Slidr avec des paramètres personnalisés var s = slidr.create("slidr-api-demo", ( breadcrumbs: true, overflow: true )); // Ajoute des diapositives horizontales avec un effet de transition par défaut. // l'élément de tableau en double "un" à la fin permet à Slidr // de faire défiler les diapositives indéfiniment s.add("h", ["un", "deux", "trois", "un"]); // Ajoute une diapositive verticale avec un effet de transition "cube". s.add("v", ["cinq", "quatre", "trois", "cinq"], "cube"); // Démarre le curseur. s.start();

Entrée courte

Var s = slidr.create("slidr-api-demo", ( breadcrumbs: true, overflow: true )).add("h", ["un", "deux", "trois", "un"]) .add("v", ["cinq", "quatre", "trois", "cinq"], "cube") .start();

La liste complète des fonctions de l'API Slidr.js est ci-dessous.

/** * Démarrez le Slider ! * Trouve automatiquement les diapositives à créer si rien n'a été ajouté avant d'appeler start(). * @param (chaîne) opt_start `data-slidr` id pour démarrer. * @return (this) */ function start(opt_start) (); /** * Vérifiez si nous pouvons glisser. * @param (chaîne) à côté d'une direction ("haut", "bas", "gauche", "droite") ou d'un identifiant `data-slidr`. * @return (booléen) */ function canSlide(next) (); /** * Glisser! * @param (chaîne) à côté d'une direction ("haut", "bas", "gauche", "droite") ou d'un identifiant `data-slidr`. * @return (this) */ fonction slide(next) (); /** * Ajoute un ensemble de diapositives. * @param (chaîne) direction `horizontal || h` ou `vertical || v`. * @param (Array) ids Une liste d'identifiants "data-slidr" à ajouter à Slidr. Les slides doivent être des enfants directs du Slidr. * @param (string=) opt_transition La transition à appliquer entre les slides, ou utilise la valeur par défaut.* @param (boolean=) opt_overwrite Indique s'il faut écraser les mappages/transitions de diapositives existants en cas de conflit.* @return (this) */ function add(direction, ids, opt_transition, opt_overwrite) (); /** * Automatiquement passer à la diapositive suivante après un certain délai.Appelle start() si elle n'a pas déjà été appelée.* @param (int=) opt_msec Le nombre de millis entre chaque transition de diapositive.Par défaut à 5000 (5 secondes).* @param (string= ) opt_direction "up", "down", "left" ou "right". La valeur par défaut est "right".* @param (string=) opt_start L'id `data-slidr` à partir duquel commencer (ne fonctionne que si auto est appelé pour démarrer le Slidr).* @return (this) */ function auto(opt_msec, opt_direction, opt_start) (); /** * Arrête la transition automatique si elle est activée. * @return (this) */ fonction stop() (); /** * Définir des minutages d'animation personnalisés. * @param (string|Object) transition Soit un nom de transition (c'est-à-dire "cube"), soit un objet ("transition": "timing"). * @param (string=) opt_timing Le nouveau timing de l'animation (c'est-à-dire "0.5s easy-in"). Non requis si la transition est un objet. * @return (this) */ function timing(transition, opt_timing) (); /** * Basculer le fil d'Ariane. * @return (this) */ function breadcrumbs() (); /** * Basculer les contrôles. * @param (string=) opt_scheme Activer/désactiver s'il n'est pas présent, sinon changer la mise en page. "border", `corner` ou `none`. * @return (this) */ contrôles de fonction (opt_scheme) ();

Pages défilées pendant la transition des diapositives

Ce bogue ennuyeux apparaît dans certains navigateurs. Pour résoudre ce problème, vous devez ajouter un style au corps :

Corps ( débordement : masqué ; )

Redimensionnement dynamique

Slidr lui-même "comprend" s'il est nécessaire de redimensionner le curseur pour l'adapter à l'image. Si le bloc curseur a des dimensions, Slidr ne les modifiera pas automatiquement. Si les propriétés min-width et min-height sont spécifiées, alors le curseur se redimensionnera en fonction du contenu, en tenant compte de ces valeurs. Sinon, le dimensionnement se fera automatiquement.

Redimensionnement automatique

Cotes statiques

Contrôles du curseur

La disposition des contrôles est la suivante :

Vous pouvez personnaliser n'importe quel contrôle de curseur avec des sélecteurs CSS :

de côté .slidr-control.right ( largeur : 50px !important ; hauteur : 50px !important ; haut : 50% !important ; margin-top : -25px !important ; droite : -25px !important ; border-radius : 25px ; arrière-plan : url("/static/images/arrow_right.png") 14px 13px noir sans répétition ; opacité : 0,4 ; ) de côté .slidr-control.right:hover ( opacité : 1 ; )

Le contrôle fléché est implémenté avec le pseudo-sélecteur :after, donc pour le masquer utilisez le code suivant :

// Masque une seule flèche dans un seul contrôleur. aparté .slidr-control.right:after ( border-color: transparent !important; ) // Masque toutes les flèches dans un seul contrôleur. de côté .slidr-control:after ( border-color: transparent !important; ) // Masque toutes les flèches Slidr. de côté .slidr-control:after ( border-color: transparent !important; )

Fil d'Ariane Slidr

Les fils d'Ariane ont un balisage HTML simple. Chaque ul représente la ligne entière et chaque li représente un fil d'Ariane :

Styler les fils d'Ariane avec CSS :

// Personnalisez la position, la taille, la couleur de la bordure et la couleur d'arrière-plan. de côté ( droite : 50% !important ; marge droite : -41px !important ; ) de côté .slidr-breadcrumbs li ( largeur : 15px !important ; hauteur : 15px !important ; marge : 3px !important ; ) de côté .slidr-breadcrumbs li.normal ( border-color: white !important; ) de côté .slidr-breadcrumbs li.active ( background-color: noir !important; )

Licence

Ce logiciel est libre d'utilisation sous la licence MIT.

Il s'agit d'un curseur tactile réactif écrit en jQuery. Le moteur de ce plugin utilise des animations CSS3, mais en même temps, des solutions de repli sont fournies pour les anciennes versions des navigateurs. Glide.js est simple et léger.

Usage

1. Inclure jQuery

La seule dépendance du plugin est jQuery, que nous devons d'abord inclure :

2. Inclure Glide.js

3. Ajouter du HTML

Relions les styles de base.

Enroulons la structure html du slider.

4. Initialisation

Lancement du curseur avec les paramètres par défaut...

... ou personnalisez-le vous-même

Réglages

Liste des options disponibles :

Paramètre	Valeur par défaut	Un type	La description
lecture automatique	4000	entier/booléen	Défilement automatique (faux pour désactiver)
survoler	vrai	bourdonner	Pause du défilement automatique lorsque la souris survole le curseur
animationTime	500	entier	!!! Cette option fonctionne si le navigateur ne prend PAS en charge css3. Si css3 est supporté par le navigateur, alors ce paramètre doit être changé dans le fichier .css !!!
flèches	vrai	booléen/chaîne	Afficher/masquer/attacher des flèches. True pour afficher les flèches dans le conteneur du curseur. Faux pour cacher. Vous pouvez aussi spécifier le nom de la classe (exemple : ".class-name") pour joindre un code html spécial
flèchesWrapperClass	curseur-flèches	chaîne de caractères	La classe qui sera affectée au conteneur avec des flèches
flècheMainClass	curseur flèche	chaîne de caractères	Classe principale pour toutes les flèches
arrowRightClass	curseur-flèche-droite	chaîne de caractères	Classe pour flèche droite
flècheGaucheClasse	curseur-flèche-gauche	chaîne de caractères	Classe pour flèche gauche
arrowRightText	suivant	chaîne de caractères	Texte pour la flèche droite
flècheGaucheTexte	précédent	chaîne de caractères	Texte pour la flèche gauche
navigation	vrai	booléen/chaîne	Afficher/masquer/attacher la navigation des diapositives. Fidèle à afficher. Faux pour cacher
navCenter	vrai	bourdonner	Navigation centrale
navClass	slider-nav	chaîne de caractères	Classe pour conteneur de navigation
navItemClass	slider-nav_item	chaîne de caractères	Classe pour l'élément de navigation
navCurrentItemClass	slider-nav__item--actuel	chaîne de caractères	Classe pour l'élément de navigation courant
clavier	vrai	bourdonner	Faites défiler la diapositive en appuyant sur les boutons gauche/droite
TouchDistance	60	entier/booléen	Prise en charge tactile (tactile). False pour désactiver cette fonctionnalité.
avantInit	une fonction()()	une fonction	Rappel qui s'exécutera avant l'initialisation du plugin
aprèsInit	une fonction()()	une fonction	Rappel qui s'exécutera après l'initialisation du plugin
avant la transition	une fonction()()	une fonction	Rappel qui s'exécutera avant de faire défiler le curseur
après la transition	une fonction()()	une fonction	Rappel qui s'exécutera après le défilement du curseur

API

Pour utiliser l'API, écrivez glide dans une variable.

var glisse = $(".slider").glide().data("api_glide");

Les méthodes API sont maintenant à votre disposition.

Glide.jump(3, console.log("Wooo!"));

• .current() - Renvoie le numéro du côté actuel
• .play() - Démarrer le défilement automatique
• .pause() - Arrête le défilement automatique
• .next(callback) - Faites défiler le curseur vers l'avant
• .prev(callback) - Faites défiler le curseur vers l'arrière
• .jump(distance, callback) - Accéder à une diapositive spécifique
• .nav(target) - Attache la navigation à un élément spécifique (ex : "body", ".class", "#id")
• .arrows(target) - Attache des flèches à un élément spécifique (par exemple : "body", ".class", "#id")

La conception Web adaptative ou, si vous préférez, la conception Web réactive n'est plus seulement une autre tendance de conception, c'est déjà une sorte de norme de développement de sites Web qui garantit la polyvalence des sites Web, une perception visuelle harmonieuse sur les écrans des différents appareils utilisateur. Plus récemment, lors du développement d'un modèle adaptatif, j'ai dû faire face à diverses difficultés pour intégrer certains curseurs et galeries d'images sans violer le style de conception général. Maintenant, tout est beaucoup plus simple, il existe un grand nombre de solutions prêtes à l'emploi sur le réseau, et ce qui est particulièrement agréable, c'est que la plupart d'entre elles sont disponibles gratuitement, en 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 des curseurs d'image jQuery réactifs qui sont apparus le plus récemment et sont distribués sans aucune restriction, c'est-à-dire. complétement gratuit.

Curseur WOW

Curseur d'image jQuery réactif avec un grand nombre d'effets visuels (rotations, flyouts, flous, spirales, stores, etc.) et de nombreux modèles prêts à l'emploi. Avec l'assistant d'intégration de page intégré de WOW Slider, vous pouvez facilement créer de superbes diaporamas en quelques minutes. Le site du développeur contient toute la documentation nécessaire à la configuration et à l'utilisation du plugin en russe, d'excellents exemples en direct du plugin. Un plugin Wordpress autonome et un module Joomla sont également disponibles en téléchargement. Je suis sûr que beaucoup de gens aimeront ce merveilleux curseur, à la fois pour les débutants et les webmasters avancés.

HiSlider

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 assez 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. Plusieurs modèles et habillages 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 - bon vieux, bien connu de tous dans le domaine, l'un des curseurs d'image les plus beaux et les plus faciles à utiliser. Le plugin jQuery Nivo Slider est téléchargeable et utilisable gratuitement sous la licence MIT. Il existe également un plugin séparé pour WordPress, mais malheureusement, il est déjà payé et vous devrez payer 29 $ pour une licence. Il est préférable de faire de la magie avec les fichiers de thème WP et de joindre la version jQuery gratuite du plugin Nivo Slider à votre blog, car il y a suffisamment d'informations sur le net pour le faire.
Quant à la fonctionnalité, tout est en ordre avec cela. Il utilise la bibliothèque jQuery v1.7+, de beaux 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 de tout le style de présentation des produits Apple, où plusieurs petits éléments (images) changent en cliquant sur la catégorie sélectionnée avec un simple effet d'animation. Codrops vous fournit un tutoriel détaillé sur la façon de créer ce curseur, une mise en page complète du balisage Html, un ensemble de règles CSS et un plugin jQuery exécutable, ainsi qu'un merveilleux exemple en direct d'utilisation du curseur.

Curseur Curseur

Curseur d'image plein écran dans jQuery et CSS3 + un tutoriel détaillé sur l'intégration du plugin dans les pages du site Web. L'idée est d'ouvrir la diapositive actuelle avec un contenu spécifique lors du passage au contenu suivant ou précédent. Avec les animations jQuery et CSS, vous pouvez créer des transitions uniques entre les diapositives. La disposition des curseurs réactifs garantit qu'elle s'affichera de la même manière sur les écrans de différents types d'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 dans l'exécution et flexible dans les réglages, un slider propulsé par 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 en direct.

Curseur de pile 3D

Une version expérimentale du curseur qui affiche des images avec des transitions à partir du plan 3D. Les images sont divisées en deux piles horizontales, à l'aide des flèches de navigation, le changement et la transition de chaque image suivante vers l'état de visualisation sont effectués. 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.

Curseur d'image jQuery très simple, 100% réactif et plein écran. Le travail du curseur est basé sur les transitions CSS (propriété de transition) en conjonction avec la magie jQuery. La largeur maximale est définie sur 100 % par défaut, de sorte que les images seront redimensionnées à mesure que la taille de l'écran change. Il n'y a pas d'effets d'animation spéciaux ni de fioritures dans la conception, tout est simple et affûté pour un fonctionnement fluide.

Diapositives minimales

Le nom dit tout, c'est probablement l'un des curseurs d'image jQuery les plus légers et les plus minimalistes que j'ai rencontrés (plugin 1kb). ResponsiveSlides.js- 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 célèbre frein de progression, à partir d'IE6. Le travail utilise des transitions CSS3 en conjonction avec javascript, pour plus de fiabilité. Balisage simple utilisant une liste non ordonnée, définition des transitions et des intervalles de temps, contrôle automatique et manuel des diapositives de commutation, ainsi que prise en charge de plusieurs diaporamas à la fois. Voici un "bébé" si fringant.

caméra

Camera est un plugin de diaporama jQuery gratuit pour les pages de sites Web, un curseur léger avec de nombreux effets de transition, une mise en page 100% réactive et des paramètres très simples. Il s'adaptera parfaitement aux écrans de tous les appareils des utilisateurs (écrans PC, tablettes, smartphones et téléphones portables). Possibilité de démonstration de vidéo embarquée. Changement de diapositive automatique et contrôle manuel via des boutons et un bloc de vignettes d'images. Presque une galerie complète d'images dans un design compact.

bxSlider jQuery

Un autre curseur réactif jQuery assez simple. Les diapositives peuvent contenir n'importe quel contenu, vidéos, images, texte et autres éléments. Prise en charge étendue de l'écran tactile. Utilisation des transitions d'animation CSS. Un grand nombre de variantes différentes de présentation de diaporamas et de galeries d'images compactes. Commande automatique et manuelle. Changez de diapositive à l'aide des boutons et en sélectionnant les vignettes. Petite taille de fichier source, très facile à configurer et à mettre en œuvre.

Curseur flexible 2

FlexSlider 2 - Une version mise à jour du curseur éponyme, avec une réactivité améliorée, une minification des scripts et une minimisation de la redistribution/redessin. Le plugin comprend un curseur de base, des commandes de gestion des diapositives avec des vignettes, des flèches gauche-droite intégrées et une barre de navigation inférieure en forme de bouton. La possibilité d'afficher la vidéo 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 assez 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 différents. Prise en charge des vidéos et des images intégrées des 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 la conception Web réactive. Blueberry est un plugin jQuery expérimental open source. Design minimaliste, pas d'effets, seulement des images pop-up qui se remplacent après un certain temps. C'est très simple, installez, connectez et c'est parti...

jQuery popeye 2.1

Curseur d'image jQuery très compact avec des éléments Lightbox. Grâce à sa taille flexible, il est très facile à intégrer dans n'importe quel conteneur, dans un seul article sous forme de vignettes, lorsque vous survolez ou cliquez dessus, une lightbox avec une image plus grande et des commandes est activée. Il est pratique de placer un tel curseur dans les barres latérales pour présenter des produits ou des annonces de nouvelles. Une excellente solution pour les sites avec une grande quantité d'informations.

Séquence

Curseur réactif gratuit avec transitions CSS3 avancées. Style minimaliste, 3 thèmes, Chaque cadre glisse dans une direction horizontale, apparaissant au centre, l'image va vers la gauche, la légende vers la droite, les vignettes sont dupliquées dans le coin inférieur droit. Pagination des vues du produit à afficher dans chaque cadre. Les commandes comprennent également des boutons de retour et d'avance. Prise en charge de tous les navigateurs modernes.

Glisser

Un curseur d'image très simple à la fois en termes de fonctionnalités et de paramètres, à partir des paramètres, il y a un changement de la vitesse des diapositives, la connexion d'un mode manuel (les boutons de commande sont activés), un diaporama continu. Ce curseur a le droit d'être et il ne m'a attiré que par le fait qu'il existe, je n'ai rien trouvé de particulièrement intéressant dans ce développement pour moi, peut-être que je cherchais mal)))

Curseur d'image réactif

Un si beau curseur d'image adaptatif des camarades de Vladimir Kudinov. Un outil solide et bien conçu est fourni avec des exemples illustratifs et des instructions détaillées pour la création, l'installation et l'utilisation. Design réactif, boutons et flèches verts mignons, 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 définir différentes méthodes d'animation, des diapositives de fondu ou des transitions à partir d'une direction spécifique. Affichage automatique et contrôle manuel grâce aux flèches de navigation qui s'affichent au survol de l'image. 10 types d'effets d'animation de diaporama et plus encore...

L'examen s'est avéré assez approfondi, mais pas suffisamment informatif en raison du grand nombre de produits à l'étude. Vous pouvez trouver tous les détails et les descriptions détaillées des fonctionnalités d'un plugin particulier directement sur les pages des développeurs. Je ne peux qu'espérer qu'il a été plus facile pour quelqu'un de trouver le bon outil pour créer des curseurs d'images colorés sur les pages de leurs sites.

Avez-vous déjà pensé au fait qu'il serait agréable de pouvoir travailler avec des modèles russifiés ? Réfléchissez juste une minute. Ne perdez pas de temps à travailler avec des modèles en anglais. Nous nous empressons de vous faire plaisir avec le fait que vous pouvez maintenant trouver . Le texte de chacun d'eux a été écrit à la main. Et, bien sûr, toutes les solutions prêtes à l'emploi sont incroyablement faciles à utiliser.

Avec tout mon respect, André