Curseur vertical Jquery avec flèches et navigation. Une sélection de curseurs adaptatifs
Nous avons besoin d'un simple curseur avec défilement automatique. Commençons...
Description du fonctionnement du curseur.Les diapositives seront alignées et défileront après un certain temps.
Le cadre rouge montre la partie visible du curseur.
À la fin du curseur, vous devez dupliquer la première diapositive. Ceci est nécessaire pour assurer le défilement de la troisième diapositive à la première. Vous devez également ajouter la dernière diapositive au début pour pouvoir faire défiler vers l'arrière de la première diapositive à la troisième. Vous trouverez ci-dessous le fonctionnement du curseur vers l'avant.
Lorsque le curseur atteint la fin, une copie de celui-ci depuis le début du curseur est instantanément placée à la place de la dernière diapositive. Ensuite, le cycle se répète. Cela crée l'illusion d'un curseur sans fin.
Balisage HTMLCommençons par créer un simple curseur avec défilement automatique. Il nécessite deux conteneurs pour fonctionner. Le premier définira la taille de la zone visible du curseur, et le second sera nécessaire pour y placer des curseurs. La disposition du curseur ressemblera à ceci :
Container.slider-box spécifie les dimensions du curseur. En utilisant la propriété overflow:hidden, tous les éléments qui ne sont pas inclus dans la zone à l'intérieur de l'élément sont masqués.
Container.slider est défini sur une grande largeur. Ceci est nécessaire pour que toutes les diapositives rentrent dans la ligne.
Les diapositives sont alignées à l’aide de la propriété float:left.
Vous trouverez ci-dessous une disposition schématique des blocs coulissants.
Le mouvement des diapositives s'effectuera en modifiant en douceur la propriété margin-left du conteneur.slider.
$(function () ( var width= $(".slider-box" ) .width () ; // Largeur du curseur. interval = 4000 ; // Intervalle de changement de diapositive. $(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Une copie de la dernière diapositive est placée au début. $() .eq (1 ) .clone () .appendTo ( "slider" ) ; // Une copie de la première diapositive est placée à la fin. // Container.slider est décalé vers la gauche de la largeur d'une diapositive setInterval("animation()" , interval) ; // La fonction animation() est lancée pour changer de diapositive. ) ) ; function animation() ( var margin = parseInt($(".slider") .css ("marginLeft" ) ) ; // Bloc actuel offset.slider width= $(".slider-box" ) .width () , / / Largeur du curseur. slidersAmount= $(".slider" ) .children () .length ; // Nombre de diapositives dans le curseur. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Si la valeur actuelle la diapositive n'est pas la dernière , ( margin= margin- width; // alors la valeur de la marge est réduite de la largeur de la diapositive. ) else ( // Si la dernière diapositive est affichée, $(".slider" ) .css ( "margin-left" , - width) ; // puis block.slider revient à sa position initiale, margin=- width* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; / / Block.slider est décalé vers la gauche d'une diapositive. ) ;Le résultat était un simple curseur avec un défilement automatique sans fin.
Dans cet article, nous verrons comment créer très simplement un curseur adaptatif pour un site Web à l'aide de CSS Flexbox et de transformations CSS.
Codes sources et démo du curseurUn projet de slider appelé chiefSlider se trouve sur GitHub. Vous pouvez y accéder en utilisant ce lien.
Curseur avec une diapositive active (pas de boucle) :
Curseur avec trois diapositives actives (pas de boucle) :
Un exemple qui montre comment utiliser un curseur pour faire pivoter des articles :
Avantages de chiefSlider Listons les principaux avantages de ce slider :
- premièrement, il ne crée pas de clones d'éléments pour organiser le bouclage, comme cela est implémenté par exemple dans les plugins OwlCarousel et slick ;
- deuxièmement, cela ne dépend pas de la bibliothèque jQuery ; cela supprime non seulement des exigences supplémentaires, mais facilite également les choses ;
- troisièmement, il n'apporte pratiquement aucune modification au DOM du document ; la seule chose qu'il fait est d'ajouter ou de modifier les valeurs de transformation CSS pour les éléments du curseur ;
- quatrièmement, il ne contient qu'un ensemble minimal de fonctions ; des fonctionnalités supplémentaires peuvent être ajoutées en fonction de la tâche ;
- cinquièmement, il est adaptatif, c'est-à-dire il peut être utilisé sur n’importe quel site Web ; L'adaptabilité du curseur est configurée à l'aide de CSS ;
- sixièmement, le nombre d'éléments actifs est ajusté à l'aide de CSS ; cela signifie qu'il peut être utilisé pour créer un carrousel avec soit une diapositive active, soit n'importe quel nombre d'entre elles.
L'installation du slider se déroule en 3 étapes :
- ajoutez le CSS chiefSlider à la page ou à un fichier CSS connecté à la page ;
- placez le code HTML du slider à l'endroit souhaité sur la page ;
- insérez du code JavaScript dans la page ou dans un fichier js connecté à la page.
Il est conseillé de minimiser le code CSS et JavaScript ; cette action garantira un chargement plus rapide des pages.
Comment développer un slider simple pour un site Web (sans boucle)La création du chiefSlider consistera à créer du code HTML, CSS et JavaScript (sans jQuery).
Code HTML pour le slider chiefSlider :
Comme vous pouvez le constater, le slider a une architecture HTML très simple. Cela commence par le bloc principal, qui a une classe slider. Ce bloc est composé de 3 éléments.
Le premier élément est .slider__wrapper . Il agit comme un wrapper pour les éléments .slider__item (diapositives).
Les deux éléments restants (.slider__control) représentent visuellement les boutons. Ils serviront à naviguer dans la diapositive, c'est-à-dire passer aux éléments précédents et suivants.
Code CSS pour le slider chiefSlider :
/* STYLES PRINCIPAUX */ .slider ( position : relative ; débordement : caché ; ) .slider__wrapper ( affichage : flex ; transition : transformation facile en 0,6 s ; /* 0,6 durée de changement de diapositive en secondes */ ) .slider__item ( flex : 0 0 50%; /* définit le nombre de diapositives actives (dans ce cas 2 */ max-width: 50%; /* définit le nombre de diapositives actives (dans ce cas 2 */ ) /* STYLES POUR LES BOUTONS ARRIÈRE ET AVANT * / .slider__control ( position : absolue ; affichage : aucun ; haut : 50 % ; transformation : traduireY (-50 %) ; aligner les éléments : centre ; justifier le contenu : centre ; aligner le texte : centre ; largeur : 40 px ; /* largeur du bouton */ hauteur : 50 px ; /* hauteur du bouton */ opacité : 0,5 ; /* transparence */ arrière-plan : #000 ; /* couleur d'arrière-plan */ ) .slider__control_show ( affichage : flex; ) .slider__control:hover, . slider__control:focus ( décoration de texte : aucune ; contour : 0 ; opacité : .9 ; /* transparence */ ) .slider__control_left ( gauche : 0 ; ) .slider__control_right ( droite : 0 ; ) .slider__control::before ( contenu : " " ; affichage : bloc en ligne ; largeur : 20 px ; /* largeur de l'icône (flèche) */ height: 20px; /* hauteur de l'icône (flèche) */ fond : centre transparent sans répétition ; taille de l'arrière-plan : 100 % 100 % ; ) .slider__control_left::before (image d'arrière-plan: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )
Comme vous pouvez le constater, le code CSS du slider n’est pas non plus très compliqué. Les principales définitions avec lesquelles vous pouvez personnaliser l'apparence du slider sont accompagnées de commentaires.
Code CSS qui détermine le nombre d'éléments actifs :
/* définit le nombre de slides actives (dans ce cas 2) */ flex: 0 0 50%; largeur maximale : 50 % ;
Ce code définit le nombre d'éléments actifs pour le curseur à 2.
Pour qu'un curseur, par exemple, ait un élément actif, ces définitions doivent être modifiées comme suit :
/* définit le nombre de diapositives actives (dans ce cas 1) */ flex: 0 0 100%; largeur maximale : 100 % ;
La création d'un curseur adaptatif s'effectue à l'aide de media queries.
Par exemple, un curseur qui, sur les appareils dotés d'un petit écran, devrait avoir une diapositive active, et sur les grands, quatre :
Slider__item ( flex : 0 0 100 % ; largeur maximale : 100 % ; ) @media (largeur minimale : 980 px) ( .slider__item ( flex : 0 0 25 % ; largeur maximale : 25 % ; ) )
Code JavaScript pour le curseur chiefSlider :
« utiliser strict » ; var multiItemSlider = (function () ( fonction de retour (sélecteur) ( var _mainElement = document.querySelector(selector), // élément de bloc principal _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // éléments (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // contrôles _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // bouton "GAUCHE" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // bouton "DROITE" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // largeur du wrapper _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / largeur d'un élément _positionLeftItem = 0, // position de l'élément actif gauche _transform = 0, // valeur de transformation.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // taille du pas (pour la transformation) _items = ; // tableau de elements // remplissage du tableau _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); )); var position = ( getMin : 0, getMax : _items.length - 1, ) var _transformItem = fonction (direction) ( if (direction === "droite") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (direction === "left") ( if (_positionLeftItem position.getMax() ) ( nextItem = position.getItemMin(); _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (direction === "gauche") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) { nextItem = position.getItemMax(); _items.position = position.getMin() - 1; _items.transform -= _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; } _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; }
En fait, tout est simple ici.
Par exemple, pour passer à la diapositive suivante, le tableau items est d'abord recherché pour un élément dont la position est supérieure à celle de l'élément actuel le plus à droite.slider__item.
S'il existe un tel élément dans le tableau, alors la transformation de element.slider__wrapper est effectuée (c'est-à-dire des actions, comme dans l'algorithme sans boucle).
Mais s'il n'existe pas un tel élément, en plus de transformation.slider__wrapper, un certain nombre d'autres actions sont effectuées. Tout d’abord, le tableau items est recherché pour l’élément avec la position minimale. Après réception de cet élément, sa position est définie, dont la valeur sera égale à la valeur de l'élément droit actuel + 1. Et bien sûr, sa transformation s'effectue, d'un tel nombre de pour cent, qu'elle aboutit à la fin, c'est-à-dire après le dernier élément.
Pour passer à la diapositive précédente, des actions similaires sont effectuées, mais en sens inverse.
De plus, pour un curseur en boucle, vous n'avez pas besoin de basculer la visibilité des boutons Gauche et Droit. Ces boutons dans cette version du curseur seront toujours affichés.
Pour ce faire, vous avez besoin de :
- supprimez la classe slider__control_show du contrôle « Droite » ;
- dans le CSS pour selector.slider__control, changez la valeur de la propriété d'affichage en flex .
Vous pouvez programmer des changements automatiques de diapositives à certains intervalles à l'aide de la fonction setInterval.
Var _cycle = fonction (direction) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )
La fonction setInterval dans cet exemple exécutera la fonction _transformItem à des intervalles spécifiés égaux à la valeur de la variable _config.interval.
De plus, il est conseillé d'ajouter un arrêt au changement automatique des diapositives lorsque vous déplacez le curseur sur le curseur.
Vous pouvez implémenter cette fonctionnalité comme suit :
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.direction); )); )
Comment arrêter le changement automatique de diapositive si l'élément n'est pas visible par l'utilisateur ?Il est conseillé de désactiver le changement automatique de diapositive dans deux cas :
- lorsque la page (sur laquelle se trouve ce slider) est inactive ;
- lorsque le curseur est en dehors de la zone de visibilité de la page.
Le premier cas peut être géré à l’aide de l’événement visiblechange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Fonction pour le gestionnaire d'événements de visibilitéchange :
// gestion de l'événement "Modifications de visibilité du document" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Le calcul de la visibilité d'un élément peut être effectué à l'aide de la fonction _isElementVisible :
Fonction _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y) ( return document.elementFromPoint(x, y); ); if (rect.right< 0 || rect.bottom < 0 || rect.left >vLargeur || rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom))); )
Vous pouvez placer l'appel _isElementVisible, par exemple, au début de la fonction _transformItem. Cette action annulera le changement automatique de diapositive si le curseur est actuellement en dehors de la fenêtre.
Var _transformItem = function (direction) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Curseur qui répond au redimensionnement de la fenêtre du navigateurCette version du curseur adaptatif diffère des précédentes en ce qu'elle permet de modifier le nombre d'éléments actifs (diapositives) lors du redimensionnement de la fenêtre du navigateur. Les utilisateurs ne redimensionnent généralement pas leur navigateur, mais cela peut quand même arriver.
Ceci est implémenté à l'aide de l'événement resize et du tableau _states. Le tableau est utilisé pour les calculs. Son utilisation vous permettra d'éviter de réinitialiser le curseur lorsque cela n'est pas nécessaire.
Un des moyens efficaces Attirer l'attention des utilisateurs sur une page de site Web est la création d'une animation animée. Les éléments d’animation aident à informer et à montrer plus clairement votre produit aux utilisateurs. Dernièrement Les panneaux contextuels sont devenus très populaires, ainsi qu'un certain nombre d'autres effets qui apparaissent lorsque vous faites défiler ou cliquez sur une image. Ils sont également connus sous le nom de curseurs, carrousels et panneaux contextuels. Dans cet article, nous parlerons de la création d'un curseur de carrousel adaptatif avec un effet de défilement automatique fluide.
Aujourd'hui, il existe des centaines de critiques sur Internet avec des liens vers des solutions toutes faites, mais la plupart d'entre elles contiennent de nombreuses fonctions inutilisées qui réduisent considérablement les performances du curseur et ralentissent également le chargement du site dans son ensemble. Les développeurs Web professionnels se sont toujours efforcés de créer des produits logiciels dont la configuration est flexible, avec une faible barrière à l'entrée pour des bibliothèques et des plugins supplémentaires. C'est pourquoi notre script utilise la configuration minimale requise pour organiser un tel curseur. La fonctionnalité vous permet de définir l'intervalle de commutation, la vitesse, ainsi que le choix d'une diapositive spécifique. Vous trouverez ci-dessous un certain nombre de variables qui régulent le fonctionnement du curseur lui-même.
timeList - vitesse de commutation des diapositives
TimeView - afficher l'heure
RadioBut - boutons sous la diapositive pour une navigation rapide. La valeur par défaut est true, si vous utilisez false les boutons disparaîtront.
Maintenant, commençons ! Créons et ouvrons le fichier index.htm
Comme nous pouvons le voir, il n'y a rien de compliqué dans le code présenté ; slider-wrap définit position générale et aligne le curseur au milieu de l'écran. Le paramètre active-slide définit la taille et la hauteur de l'image en fonction de sa longueur. Et le curseur affiche uniquement l'image active.
Créons et ouvrons maintenant le fichier style.css et ajoutons-y le balisage dont nous avons besoin :
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); corps ( couleur : #4f4f5a ; famille de polices : "Roboto", sans empattement ; taille de police : 16px ; remplissage : 0 ; marge : 0 ; ) #slider-wrap( largeur maximale : 800px ; marge : 0 auto ; margin-top : 80px ; ) #active-slide (largeur : 100 % ; affichage : tableau ; position : relative ; débordement : caché ; -webkit-user-select : aucun ; -moz-user-select : aucun ; -ms- sélection par l'utilisateur : aucun ; -o-sélection de l'utilisateur : aucun ; sélection par l'utilisateur : aucun ; ) #slider( position : relative ; largeur : calc(100 % * 4); haut : 0 ; gauche : 0 ; marge : 0 ; remplissage : 0 ; -webkit-transition : 1 s ; -o-transition : 1s ; transition : 1s; -webkit-transition-timing-function : facilité d'entrée-sortie ; -o-transition-timing-function : facilité d'entrée -out ; fonction de synchronisation de transition : facilité d'entrée-sortie ; ) .slide( largeur : calc(100%/4); style de liste : aucun ; affichage : en ligne ; float : gauche ; ) .slide img ( largeur : 100%; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( margin:2px; display:inline-block; width:16px; height:16px; overflow :hidden; text-indent:-9999px; background:url(radioBg.png) centre en bas sans répétition ; ) .Radio-But .ctrl-select:hover ( curseur:pointeur; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( affichage :block; largeur:40px; hauteur:100%; position:absolue; haut:0; débordement:caché; retrait de texte:-999px; arrière-plan: url("arrowBg.png") centre gauche sans répétition; opacité:0,5 ; z-index:3; outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( right:10px; background:url(arrowBg.png) centre droit sans répétition; ) #prewbutton:hover, # bouton suivant: survol ( opacité: 1; )
Dans la propriété de style slider-wrap, entrez la largeur – la longueur maximale de vos images.
Dans les propriétés de style #slider ( width: calc(100% * 4); ) et .slide ( width: calc(100%/4); ), spécifiez le nombre d'images dans votre slider. Dans notre exemple, il y en a 4.
Si les flèches avant/arrière interfèrent avec la visibilité de votre curseur, elles peuvent être rendues invisibles et elles apparaîtront lorsque vous les survolerez. Pour ce faire, dans les paramètres prewBut et nextBut, définissez la propriété opacity sur 0.
Créons et ouvrons maintenant notre fichier slider.js, qui contiendra le code du slider. N'oubliez pas d'inclure la bibliothèque jQuery.
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); if(arrow == "next")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = arrow; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("") .prependTo ("#active-slide"); $("#nextbutton").click(function())( animSlide("next"); return false; )) $("#prewbutton").click(function())( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += "" + index + ""; )); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pause = faux ; var rotateur = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), TimeView);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pause = true;), function()(pause = false; rotateur(); )); var cliquant = false; var précédentX; $(".slide").mousedown(function(e)( cliquant = true; prevX = e.clientX; )); $(".slide").mouseup(function() ( clic = false; )); $(document).mouseup(function())( clic = false; )); $(".slide").mousemove(function(e)( if(cliquant == true) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) clic = false; ) )); $(".slide").hover().css("curseur", "pointeur"); rotateur(); ));
La fonction animSlide accepte trois types de valeurs : next, prew, valeur numérique. Le paramètre suivant change la diapositive suivante, prew renvoie la précédente et la valeur numérique est la diapositive spécifique sélectionnée via le bouton radio situé sous la diapositive.
Le curseur présenté utilisait des images de la ressource Web https://pixabay.com/.
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, il fournit des solutions de repli pour les anciennes versions des navigateurs. Glide.js est simple et léger.
Utilisation 1. Connectez jQueryLa seule dépendance du plugin est jQuery, que nous devons d'abord inclure :
2. Connectez Glide.js
3. Ajouter du HTML
Relions les styles de base.
Créons la structure html du slider.
4. Initialisation
Lancez le curseur avec les paramètres par défaut...
$(".slider").glide();
...ou personnalisez-le vous-même
$(".slider").glide(( lecture automatique : 5000, flèches : "corps", navigation : "corps" ));
ParamètresListe des paramètres disponibles :
| Paramètre | Valeur par défaut | Taper | Description |
| lecture automatique | 4000 | entier/bool | Défilement automatique (faux pour désactiver) |
| survol | vrai | bouffon | Suspendre le défilement automatique lorsque vous passez la souris sur le curseur |
| animationTime | 500 | int | !!! 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 modifié 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 se cacher. Vous pouvez également spécifier le nom de la classe (exemple : ".class-name") pour joindre un code HTML spécial |
| arrowsWrapperClass | curseur-flèches | chaîne | La classe qui sera assignée au conteneur avec des flèches |
| arrowClasseMain | curseur-flèche | chaîne | Classe principale pour toutes les flèches |
| flècheDroiteClasse | curseur-flèche--droite | chaîne | Classe de flèche droite |
| arrowLeftClass | curseur-flèche--gauche | chaîne | Classe de flèche gauche |
| flècheDroiteTexte | suivant | chaîne | Texte de la flèche droite |
| flècheGaucheTexte | précédent | chaîne | Texte de la flèche gauche |
| navigation | vrai | booléen/chaîne | Afficher/masquer/épingler la navigation des diapositives. Fidèle à afficher. Faux pour cacher |
| Centre de navigation | vrai | bouffon | Navigation par centre |
| classe de navigation | navigation par curseur | chaîne | Classe pour le conteneur de navigation |
| navItemClass | curseur-nav__élément | chaîne | Classe pour l'élément de navigation |
| navCurrentItemClass | slider-nav__item--actuel | chaîne | Classe pour l'élément de navigation actuel |
| clavier | vrai | bouffon | Faites défiler la diapositive lorsque vous appuyez sur les boutons gauche/droite |
| TouchDistance | 60 | entier/bool | Touchez l'assistance. False pour désactiver cette fonctionnalité. |
| avantInit | fonction()() | fonction | Un rappel qui s'exécutera avant l'initialisation du plugin |
| aprèsInit | fonction()() | fonction | Rappel qui s'exécutera après l'initialisation du plugin |
| avantTransition | fonction()() | fonction | Un rappel qui s'exécutera avant de faire défiler le curseur |
| aprèsTransition | fonction()() | fonction | Rappel qui s'exécutera après avoir fait défiler le curseur |
Pour utiliser l'API, écrivez glide dans une variable.
Var glide = $(".slider").glide().data("api_glide");
Les méthodes API sont désormais à 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) - Passer à une diapositive spécifique
- .nav(target) - Attache la navigation à un élément spécifique (par exemple : "body", ".class", "#id")
- .arrows(target) - Attache des flèches à un élément spécifique (par exemple : "body", ".class", "#id")
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 »
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
Un curseur conçu pour fonctionner sur les appareils mobiles.
12. Indicateur de chargement CSS3
Le plugin est une solution simple pour visualiser les produits dans différentes options de couleurs (pertinent, par exemple, pour les magasins de vêtements en ligne afin de permettre aux visiteurs de choisir Schéma de couleur 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
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
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. Une version gratuite de la galerie est disponible en téléchargement. Vous devrez payer pour des fonctionnalités plus avancées et supprimer le logo du développeur.
23. Plugin « JQVMap »
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 »
Ventes de caoutchouc carrousel adaptatif(carrousel d'images vertical et horizontal) et galeries 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. La dernière version est toujours sur Github.
32. Une nouvelle version Curseur d'image 3D « Slicebox »
Une nouvelle version avec des modifications apportées et de nouvelles fonctionnalités ajoutées : désormais le slider 3D est devenu évolutif, vous pouvez le voir lorsque vous réduisez la fenêtre du navigateur ; ajout du support de Firefox ; Vous pouvez déjà utiliser du contenu HTML dans la description de la diapositive (auparavant, la description était extraite de l'attribut de lien sans possibilité d'y utiliser des 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. Diverses options exécutions : à trois planches, à deux planches et une planche avec centrage ultérieur du billet déplié.
34. Plugin jQuery « Windy »
Plugin pour naviguer dans du contenu, tel que des images. Lorsque vous faites défiler les photos, elles se dispersent dans des directions différentes (l'effet rappelle un peu la distribution de cartes dans jeu de cartes 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