Bonjour, chers lecteurs du blog. Aujourd'hui, je vous présente une sélection utile de curseurs JQuery gratuits avec des exemples. Si vous décidez néanmoins de mettre un curseur d'image sur votre ressource, cette sélection vous sera très utile et, croyez-moi, vous avez l'embarras du choix. De plus, tous les curseurs ont des exemples et vous pouvez essayer chacun d'eux en action. En général, je ne vais pas vous distraire, faites votre choix :-)
Curseur d'image jQuery simpleLe curseur de vignette le plus courant et le plus petit de votre site.
Curseur de vignettes dans JQueryUn curseur très simple et intéressant avec des vignettes qui convient à presque tous les designs.
Un grand et très beau slider d'image, avec un défilement de texte intéressant.
Le curseur le plus courant et le plus simple pour votre ressource
Un curseur spectaculaire auquel il est impossible de passer.
Attendez et curseur de texte élégant avec des images et avec un bel effet de retournement.
Défilement intéressant des images qui défile en continu et en douceur. Par défaut, il existe des images de différents fruits, que vous pouvez modifier selon les vôtres.
Un slider intéressant avec de grosses flèches roses qui changent de taille en agrandissant l'image.
Parfois, je dois résoudre des problèmes liés au frontend, même si je n'aime pas ça :)
En fait, vous pouvez évaluer mon attitude envers tout ce qui touche au « beau » à partir de la conception de ce site, qui a été développé par moi seul :)
Cependant, relativement récemment, j'ai été confronté à la nécessité d'implémenter un curseur en JavaScript, et cela a dû être fait sans aucune bibliothèque prête à l'emploi et même sans le jQuery préféré de tous.
Ce besoin était dû au fait que le résultat aurait dû être un script JS qui serait connecté au site via un service tiers. Par conséquent, les carrousels prêts à l'emploi en JavaScript n'étaient plus nécessaires, car Pour les intégrer, il fallait ajouter une connexion bibliothèque au code HTML du site via une balise de script et copier les fichiers eux-mêmes soit sur le serveur, soit les extraire via cdn, mais cela nécessiterait là encore d'éditer le code de la ressource.
Comment créer un slider JavaScript : le débutAujourd'hui, je pense que tous ceux qui se sont retrouvés dans une situation similaire ont commencé par rechercher des développements existants, car... lorsque la tâche de création d'un carrousel JS entre dans le cadre du travail, elle doit toujours être effectuée le plus rapidement possible. Et dans de telles conditions, personne ne vous permettra de vous asseoir et d'inventer vos propres vélos.
Les clients ne se soucient toujours pas de la façon dont le code est écrit, de son architecture, l’essentiel est de voir le résultat !
Du coup, comme vous l'avez compris, avant d'écrire un slider en JavaScript sans jQuery, j'ai décidé d'en trouver un tout fait et de le modifier en fonction de mes besoins. Pourquoi pas de jQuery ? Oui, car sur la ressource cible, où j'avais prévu de connecter mon slider via le service, l'appel jQuery dans le code était postérieur au script connecté par le service. Par conséquent, les constructions jQuery dans mon code n'étaient tout simplement pas perçues.
Comme base, j'ai pris ce curseur d'image JavaScript - https://codepen.io/gabrieleromanato/pen/pIfoD.
J'ai décidé de m'arrêter là, parce que... son code JS a été écrit selon les principes de la POO et ses classes sont basées sur des prototypes et non sur des fonctions banales.
Pour être honnête, je ne comprends absolument pas et ne reconnaisse pas le battage médiatique actuel autour de JavaScript utilisant la POO, des frameworks et d'autres éléments architecturaux dans un langage qui était à l'origine destiné à être un simple langage de script dynamique. Tout comme JS lui-même, je ne l'aime franchement pas avec sa vinaigrette syntaxique, qui permet d'écrire les mêmes constructions de plusieurs manières.
Mais malheureusement, dans le monde moderne, peu de gens partagent mes positions, car... ce langage se développe à un rythme fou et tente même de conquérir l'esprit des développeurs backend utilisant Node.js comme alternative à Java, PHP, C#, Ruby et autres monstres.
En conséquence, pour ne pas se retrouver sans travail, il faut comprendre tranquillement JavaScript. Et dans l'implémentation pure du curseur JavaScript que j'ai choisie, j'ai rencontré quelque chose que, comme vous le comprenez, je méprise dans ce langage. C'est pourquoi je l'ai choisi, pour qu'il y ait au moins une raison de travailler et de comprendre JavaScript POO et les classes prototypes - sinon je ne les aurais jamais volontairement touchés de ma vie :)
Sur la base du code que j'ai trouvé, j'avais besoin de développer un slider en JS pur dans une fenêtre pop-up (cette chose est aussi appelée popup, popup, etc.), qui aurait des boutons pour changer de diapositive et des indicateurs cliquables du courant glisser. Il a fallu aussi faire un bouton pour fermer cette fenêtre.
C'est ce avec quoi je me suis retrouvé.
Créer une bibliothèque Slider JSTout d'abord, j'ai décidé de tout implémenter judicieusement et de créer un curseur JavaScript pour le site sous la forme d'une bibliothèque pouvant être connectée au site avec un seul script, dans laquelle les composants du curseur, divisés en sous-répertoires, seront appelés. J'ai décidé de l'appeler popupSlider.js en l'honneur de son objectif initial.
Son code est disponible sur GitHub à cette adresse - https://github.com/Pashaster12/popupSlider.js
La structure de la bibliothèque est la suivante :
Le dossier des diapositives est destiné aux images de diapositives. Les contrôles contiennent des images de contrôles du carrousel JS (boutons pour fermer le curseur et changer de diapositive). Et dans les actifs, il y a des éléments statiques du curseur JS : un balisage HTML et un fichier avec des styles CSS.
Eh bien, le fichier popupSlider.js est le cœur de la bibliothèque elle-même, dans laquelle les actions JavaScript du carrousel sont écrites et une connexion est établie avec d'autres fichiers. C'est celui-ci que l'on connectera sur le site, et il appellera les autres.
J'ai décidé de commencer par le balisage HTML de notre carrousel d'images JS, qui dans mon cas ressemble à ceci :
Texte 1 
Texte 2 
Texte 3
Pour concevoir le slider en JavaScript sous forme de popup, j'ai utilisé les styles suivants :
#slider ( marge : auto ; largeur : 600 px ! important ; débordement : caché ; ) #slider-wrapper ( largeur : 9999 px ; hauteur : 343 px ; position : relative ; transition : gauche 400 ms linéaire ; ) .slide ( float : gauche ; largeur : 600px; position: relative; débordement: caché; ) .caption (largeur: 600px; hauteur: 110px; hauteur de ligne: 1,5; taille de police: 15px; poids de police: 300; alignement du texte: centre; couleur: # 000; display:table; ) .caption-container ( display: table-cell; vertical-align: middle; padding: 0 20px; ) #slider-nav ( position: absolue; bottom: -36px; text-align: center; gauche : 50 % ; transformation : traduireX (-50 %); ) #slider-nav a (largeur : 8 px ; hauteur : 8 px ; décoration de texte : aucune ; couleur : #000 ; affichage : bloc en ligne ; rayon de bordure : 50 % ; marge : 0 5 px ; couleur d'arrière-plan : #fafafa ; ) #slider-nav a.current (couleur d'arrière-plan : #337ab7 ; ) .contrôles horizontaux (position : absolue ; affichage : bloc en ligne ; largeur : 12 px ; hauteur : 20 px ; haut : 50 % ; marge supérieure : -10 px ; ) #prev ( arrière-plan : url(../controls/arrow_left_inactive.png); gauche : -40px ; ) #prev:hover ( arrière-plan: url(../controls/arrow_left_active.png); ) #next ( arrière-plan: url(../controls/arrow_right_inactive.png); right: -40px; ) #next:hover ( arrière-plan : url(../controls/arrow_right_active.png); ) #cq-popup ( largeur : 600px ; z-index : 23 ; gauche : calc(50 %) ; haut : calc(50 %) ; position : fixe !important ; répétition d'arrière-plan : pas de répétition ; position d'arrière-plan : droite ; couleur d'arrière-plan : #fff ; famille de polices : "Roboto", "Segoe UI", "Helvetica", "Georgia", "Calibri", "Verdana" ; transform: translation(-50%, -50%) scale(1); ) #cq-popup .header ( affichage : bloc en ligne ; taille de police : 17px ; poids de police : 500 ; ) #cq-popup > div ( largeur : 500 px ; taille de police : 22 px ; hauteur de ligne : 36 px ; ) #cq-popup-btclose ( décoration de texte : aucune ; position : absolue ; droite : -40 px ; haut : 0 ; arrière-plan : url (. ./controls/btn_delete_inactive.png); hauteur: 16px; largeur: 16px; ) #cq-popup-btclose:hover ( arrière-plan: url(../controls/btn_delete_active.png); ) #cq-popup-bg ( position : fixe ; haut : 0 ; largeur : 100 % ; hauteur : 100 % ; arrière-plan : rgba(51,51,51,0.8) ; indice z : 22 ; )
Suite à l’application de ces styles JS, le carrousel ressemble à ceci :
J'ai déplacé le balisage HTML et les styles CSS dans des fichiers distincts popupSlider.html et popupSlider.css, qui se trouvent dans le répertoire des ressources de la bibliothèque de curseurs JavaScript. J'ai fait cela exprès pour que lors de l'utilisation de ce code, les utilisateurs puissent facilement ajuster le balisage et la conception sans se soucier du code JS, où ce qui devrait être écrit devrait être écrit directement.
De plus, de nombreuses personnes aiment encore minimiser JS pour accélérer le chargement du site. Il serait donc très difficile de personnaliser cette solution dans les conditions spécifiées.
En conséquence, j'ai décidé d'inclure simplement des fichiers prêts à l'emploi dans le fichier de bibliothèque principal popupSlider.js, qui pour ma tâche prenait la forme suivante :
Fonction Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll ("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.nextBtn = this.el.querySelector("#next"); this.prevBtn = this. el.querySelector("#prev"); this.navigate(); ), naviguer: function() ( var self = this; for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "bloc" ; sinon if (index == 1) this.prevBtn.style.display = "none"; ), setCurrentLink : fonction (lien) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Quelques commentaires sur le code ci-dessus. Le contenu du fichier popupSlider.js est une seule classe JavaScript Slider qui, comme en PHP, contient un constructeur et des méthodes de classe. Uniquement en JS, la définition d'un constructeur, contrairement à PHP, est obligatoire.
Le constructeur est défini à l'aide de la construction suivante :
Fonction Slider(élément) ( //code constructeur)
A l'intérieur du constructeur, les actions qui seront effectuées lors de la création d'un objet de classe doivent être spécifiées.
Les méthodes de classe elles-mêmes seront situées à l'intérieur du prototype et seront disponibles pour toutes les instances de cette classe JavaScript. Le prototype JS dans mon cas est décrit par la conception suivante :
Slider.prototype = ( //méthodes)
Ils seront appelés en dehors du corps de classe comme suit :
Curseur Var = nouveau Slider(); slider.class_method();
Et à l’intérieur du code de classe lui-même, la méthode suivante est disponible :
This.class_method();
L'essentiel est de ne pas oublier qu'en JavaScript la valeur de this dépend du contexte de l'appel, donc dans les corps de certaines méthodes dans lesquelles il était nécessaire d'appeler des méthodes et des propriétés d'une classe, il existe une telle construction :
Var soi = ceci; self.class_method(); //pour accéder à une méthode d'un niveau supérieur au code de la méthode décrite
Il semble que j'ai parlé de toutes les nuances de l'écriture de code. Quelques mots maintenant sur les méthodes de notre classe JavaScript, qui contiennent des descriptions des actions JS du carrousel d'images.
chargerStatique()
La toute première méthode appelée lors de la création d'une instance d'une classe dans le constructeur. Responsable de l'ajout d'un balisage de curseur et d'un fichier avec des styles au code HTML de la page du site Web.
Tout d'abord, une nouvelle balise de lien est créée en mémoire à l'aide de la fonction JavaScript document.createElement() et les valeurs de tous les attributs nécessaires lui sont attribuées, y compris le chemin d'accès au fichier CSS avec les styles de curseur JS. Et enfin, il est ajouté à la page HTML à l'aide de la méthode JavaScript appendChild() à la fin de la section head, là où les styles doivent se trouver.
Ensuite, nous faisons de même pour le fichier avec le balisage HTML de notre slider en JavaScript pur. Il y a juste une petite nuance ici : vous ne pouvez pas simplement inclure un fichier HTML dans le même fichier, comme nous l'avons fait avec un fichier CSS. Il existe des bibliothèques spéciales pour cela, par exemple, afin d'inclure du HTML dans HTML, la bibliothèque de w3.org est excellente - https://www.w3schools.com/howto/howto_html_include.asp
Mais il faudrait alors soit l'inclure dans la bibliothèque de curseurs elle-même, soit demander aux utilisateurs de l'installer eux-mêmes. Mais tout cela n’est pas optimal, parce que… nécessite beaucoup de mouvements corporels et ralentit la vitesse de chargement du site en raison de scripts supplémentaires.
En fin de compte, j'ai décidé de prendre le contenu du fichier HTML dans le code JavaScript et de le charger dans un nouvel élément div créé en mémoire, tout comme je l'ai fait plus tôt pour inclure un fichier CSS dans JavaScript. L'élément généré est inclus à la toute fin de la section corps du code HTML de la page du site.
Si vous souhaitez insérer un div avec un balisage de curseur non seulement à la fin du corps, mais dans un conteneur spécifique, vous pouvez utiliser le code suivant :
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Saisissez ce qui suit en précisant l'identifiant souhaité du conteneur cible (dans mon cas, le slider HTML JS sera situé dans l'élément avec l'identifiant popupSlider) :
Var target = document.querySelector("#popupSlider"); cible.innerHTML = sliderHTML;
La méthode, qui est appelée dans le constructeur après loadStatic(), est nécessaire pour initialiser les propriétés de classe correspondant aux principaux éléments HTML auxquels nous accéderons dans le code suivant.
A la fin, la méthode naviguer() est appelée.
naviguer()
Dans cette méthode, les actions qui se produisent lorsque vous cliquez sur les boutons du curseur et les éléments de navigation situés sous le curseur lui-même sont indiquées sous forme de cercles.
Pour plus de commodité, j'ai déplacé le code JavaScript permettant de modifier les diapositives dans une méthode slide() distincte, mais dans celle-ci, je l'attache simplement à l'événement click pour chaque bouton rond de la boucle.
Lorsque vous cliquez sur les boutons « diapositive précédente » / « diapositive suivante », comme vous pouvez le voir, j'ai décidé de simplement émuler un clic sur le cercle correspondant, en définissant celui souhaité par rapport à celui actuel, qui a une classe CSS actuelle.
diapositive (élément)
La méthode « responsable de la magie » du carrousel JavaScript lui-même, qui contient le code qui modifie la position des diapositives. Au tout début, la méthode setCurrentLink() est appelée, dont nous parlerons un peu plus tard.
L'objet bouton de navigation du curseur JS sous la forme d'un cercle lui est transmis en tant que paramètre d'entrée.
L'interrupteur à glissière lui-même fonctionne comme ceci :
A la fin de la méthode, le comportement des boutons « diapositive précédente »/« diapositive suivante », respectivement conçus comme des flèches gauche/droite, est décrit. Si la diapositive actuelle est la première de toute la liste, alors le bouton permettant d'accéder à la diapositive précédente est masqué. Dans ce dernier cas, retirez le bouton pour passer à la diapositive suivante.
setCurrentLink(lien)
Cette méthode de notre classe JavaScript slider se charge de mettre en évidence le bouton rond de navigation correspondant à l'élément courant. Ceux. si la deuxième diapositive est sélectionnée, le deuxième bouton sera mis en surbrillance.
L'objet du bouton qui doit être sélectionné comme objet actuel est transmis comme paramètre d'entrée à la fonction.
La logique pour mettre en évidence l'élément actuel est simple :
La toute dernière méthode de la classe, qui définit l'action en cliquant sur le bouton de fermeture du curseur en forme de croix. Ici, en fait, le code est le plus compréhensible de tous ceux contenus dans la classe slider JS.
Lorsque vous cliquez sur le bouton de fermeture, auquel on accède par son identifiant, l'élément slider et l'élément qui définit le fond translucide sont supprimés de la page. Ils sont également, à leur tour, obtenus par des identifiants uniques.
La méthode elle-même est appelée dans le navigateur décrit précédemment (), qui contient tous les scénarios d'actions se déroulant sur notre curseur JavaScript.
À propos, si vous souhaitez fermer le curseur lorsque vous cliquez en dehors de celui-ci, ajoutez simplement le code suivant à cette méthode :
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
Diaporama JavaScript basé sur la bibliothèque développéeParfois, dans la pratique, vous devrez peut-être créer un carrousel à défilement JS, souvent appelé diaporama. Dans mon cas, cela n'était pas obligatoire, mais j'ai quand même décidé d'en créer un basé sur le code final de la bibliothèque pour un cas où cela pourrait être utile.
En fait, l'implémentation JavaScript d'un diaporama diffère légèrement d'un slider classique. La seule différence est que dans un diaporama, les diapositives changent automatiquement à un intervalle de temps donné, tandis que dans le cas d'un carrousel JS classique, elles changent manuellement à l'aide d'éléments de navigation.
SlideShow : fonction (délai d'attente) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute ("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); ), timeout); )
Je pense que ce qui se passe ici est clair. Pour créer cette méthode, j'ai copié le code de l'événement click des boutons coulissants manuels et je l'ai placé dans un appel JavaScript à la fonction setInterval(), qui effectue l'action spécifiée après une période de temps spécifiée.
Le script d'action est passé comme premier argument en tant que fonction anonyme, et l'intervalle de temps est passé en second, ce que j'ai décidé de faire en tant que variable dont la valeur est transmise lorsque slideShow() est appelé.
La seule modification requise du code à l'intérieur de setInterval() consistait à déterminer le nombre de diapositives et à comparer l'index de la diapositive actuelle avec celui-ci pour boucler la commutation automatique.
Eh bien, pour que ce code fonctionne, la méthode elle-même doit être appelée. J'ai décidé de faire tout cela dans le même navigateur(), qui est précisément une collection de toutes sortes de scripts. J'ai passé l'appel à la toute fin, en passant comme argument la valeur de l'intervalle de temps de changement automatique des diapositives dans notre diaporama JS (j'ai choisi 2000 millisecondes ou 2 secondes, vous pouvez modifier ce nombre si nécessaire) :
self.slideShow(2000);Après cela, vérifiez le fonctionnement du curseur JavaScript, sans oublier de nettoyer votre navigateur.
En théorie, tout devrait fonctionner. Sinon, étudiez les erreurs dans la console du navigateur et partagez-les dans les commentaires.
En conséquence, nous avons obtenu un diaporama JS dans lequel les diapositives changent automatiquement et en cercle, c'est-à-dire lorsque la dernière diapositive est atteinte, le spectacle passe dans une nouvelle boucle et le spectacle recommence depuis le tout premier élément.
Lorsque je travaillais avec diverses bibliothèques JS pour les carrousels d'images et les critiques, j'ai remarqué que les développeurs utilisaient activement cette pratique, mais avec quelques ajouts. Dans toutes les solutions que j'ai vues, le diaporama automatique est interrompu si l'utilisateur effectue un changement manuel. J'ai donc décidé de faire la même chose dans ma bibliothèque.
Pour interrompre l'affichage automatique des slides du carrousel JavaScript, j'ai décidé d'utiliser la fonction standard JS clearInterval(), à laquelle je passe en argument l'identifiant de l'intervalle de temps renvoyé par la fonction setInterval() lorsqu'elle est définie.
En conséquence, j'ai obtenu le code suivant, que j'ai décidé de ne pas écrire comme méthode distincte :
ClearInterval(self.slideCycle);
Et placé aux endroits où les actions sont décrites en cliquant sur divers éléments de navigation, c'est-à-dire dans ce qui suit:
Link.addEventListener("clic", fonction (e) (...)); self.prevBtn.addEventListener("clic", function (e) (...)); self.nextBtn.addEventListener("clic", fonction (e) (...));
Il est préférable d'appeler clearInterval() plus près de l'événement click lui-même, l'essentiel est avant et non après.
Intégration du slider JavaScript sur le siteAinsi, notre slider en JS pur est prêt. Il ne reste plus qu'à le connecter au site.
Pour ce faire, vous devez effectuer les étapes suivantes de manière séquentielle, qui sont des actions standard lors de l'intégration de bibliothèques JavaScript tierces en général.
Étape 1 . Nous copions les fichiers de la bibliothèque sur notre site Web dans un répertoire séparé.
Étape 2. Ajoutez le code suivant au HTML des pages où le slider devra être affiché, en le plaçant avant la balise body de fermeture :
Étape 3. Nous plaçons le code suivant pour appeler le carrousel JS dans n'importe quel fichier JavaScript existant, qui est inclus sur la page après avoir connecté le curseur lui-même :
Var aSlider = new Slider("#slider");
Comme vous pouvez le voir, ce code crée essentiellement un objet de la classe Slider, contenu dans popupSlider.js. C'est pourquoi il ne doit être appelé qu'après avoir connecté le fichier de classe lui-même à la page.
Ajouter de nouvelles diapositives à un carrousel JavaScriptTout est très simple ici. Étant donné que nos diapositives sont extraites d'un répertoire séparé de la bibliothèque de diapositives, lors de l'ajout de nouvelles images, il vous suffira d'y ajouter les fichiers nécessaires, en leur donnant d'abord la même taille que les autres.
Et puis dans le code du fichier assets/popupSlider.html ajoutez un nouveau bloc au conteneur avec l'identifiant slider-wrapper :
Texte
En principe, vous pouvez simplement copier un fichier similaire existant et modifier le chemin d'accès au fichier image et le texte de la signature (si cela est nécessaire).
Vous devrez également ajouter un nouvel élément de navigation sous la forme d'un cercle, car... Pour le moment, son ajout automatique n'a pas encore été mis en œuvre. Pour ce faire, vous devrez ajouter le code suivant au conteneur avec l'identifiant slider-nav, en l'écrivant à la toute fin :
La valeur de l'attribut data-slide doit être supérieure à la plus grande valeur des autres éléments. Il suffit simplement d'augmenter le courant maximum de un.
Emballer le carrousel JS dans un seul scriptÇa y est, le slider JavaScript est prêt et connecté. Personnellement, je recommande d'utiliser cette option dans la pratique si vous en avez besoin :)
Pour accélérer son fonctionnement, vous pouvez d'ailleurs compresser davantage les composants statiques : fichiers CSS, HTML et JavaScript. Je n'ai pas fait cela et je vous ai proposé du code minifié, car il existe désormais de nombreux systèmes de build frontend : Gulp, Grunt, Webpack et autres. Et chacun d'eux possède ses propres algorithmes pour compresser et connecter des fichiers.
De plus, les résultats réduits peuvent fonctionner différemment selon les systèmes d’exploitation. En général, il y a plusieurs raisons.
Et les codes sources eux-mêmes, je pense, ne sont pas si lourds qu'ils nécessitent cette procédure. Mais si vous en avez besoin, configurez vous-même la minification, en tenant compte de votre système d'exploitation et de votre collecteur.
Comme je l'ai écrit au tout début, afin de résoudre la tâche initialement fixée pour moi, j'avais besoin d'obtenir un seul fichier JS pour l'utilisation correcte de mon slider via un service tiers sur le site. Pour cette raison, à proprement parler, je n’ai pas utilisé de bibliothèques tierces toutes faites.
Ensuite, l'option d'un seul script carrousel JavaScript vous sera utile, car... tout le contenu y sera contenu directement, y compris le code HTML/CSS, qui dans le cas d'une bibliothèque est stocké dans des fichiers séparés.
Le script dans mon cas se compose de deux parties. La première partie contenait le contenu du fichier popupSlider.js, que je ne présenterai pas une seconde fois. Insérez-le vous-même, en supprimant la description de la méthode loadStatic() et son appel du code de la classe, car nous n'en aurons pas besoin.
La deuxième partie d'un script de curseur JavaScript unique pour le site est un gestionnaire pour l'événement DOMContentLoaded, qui se produit lorsque le contenu de la page est chargé.
Là, nous ajouterons le code JS du carrousel à la page HTML/CSS et créerons un objet de la classe Slider, ce qui équivaut à activer le slider lui-même.
Schématiquement, le code ressemble à ceci :
/* contenu de popupSlider.js sans décrire la méthode loadStatic() et son appel */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*code css*/ \ /* code html * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Étant donné que dans mon cas, l'option de téléchargement de fichiers sur le serveur était complètement fermée, j'ai dû télécharger les fichiers image des contrôles du carrousel JavaScript sur le cloud et au lieu des chemins d'accès dans le code HTML et CSS, écrire les liens générés lors économie.
Si vous ne rencontrez pas de telles difficultés, vous n'avez rien à changer, mais n'oubliez pas de copier les répertoires de la bibliothèque de diapositives et de contrôles sur le serveur et de spécifier les chemins d'accès corrects.
Slider JS personnalisé - perspectives de développementPour être honnête, je n'ai pas l'intention de m'engager dans un support ciblé et dans le développement de la solution que j'ai créée :) Pour le moment, il existe un tas de curseurs similaires et un petit chariot qui, contrairement au mien, ont leur propre histoire, sont minutieusement testés et sont pris en charge par une large communauté d'utilisateurs et de développeurs.
Ce n’est en quelque sorte pas intéressant pour moi de commencer tout ce voyage à partir de zéro et de créer un autre vélo, et je n’ai pas vraiment le temps pour cela. Mais, d'un autre côté, ce curseur JavaScript est une excellente opportunité de pratiquer le développement en refactorisant son code et en implémentant de nouvelles fonctions intéressantes qui n'existent peut-être pas encore.
Donc, si, comme moi, vous avez besoin d'une base de code pour vos expériences et que vous disposez d'au moins un peu de temps libre supplémentaire, copiez le code du curseur JavaScript que j'ai décrit ou rejoignez les contributeurs sur GitHub. Le référentiel est ouvert et j'ai fourni un lien vers celui-ci au début de l'article.
Si vous souhaitez améliorer vos compétences front-end sur ma création, je peux même vous donner une petite liste de modifications et améliorations dont le code a besoin et qui pourraient vous intéresser au niveau de leur mise en œuvre :
La liste des modifications que j'ai apportées n'est bien entendu pas définitive et peut être complétée. Écrivez vos suggestions, pensées et souhaits dans les commentaires sous l'article et partagez-les avec vos amis via les réseaux sociaux pour les impliquer également dans le développement.
Je vous demande de ne pas juger strictement mon code, car, comme je l'ai déjà dit, je ne me considère pas comme un spécialiste du Frontend et je ne le suis pas. Je suis également ouvert à tous vos commentaires sur le style de codage et j'espère pouvoir apprendre quelque chose de vous et de moi, c'est-à-dire remplir l'objectif principal de développer et de prendre en charge des produits OpenSource.
Rejoignez les communautés du projet, abonnez-vous aux mises à jour et vous pouvez même m'aider financièrement en utilisant le formulaire juste sous l'article lui-même, si j'ai pu vous aider avec quelque chose ou si vous aimez simplement ce que je fais :)
C'est tout ce que je voulais dire ! Tous mes vœux! 🙂
P.S. : si vous avez besoin d'un site Internet ou si vous devez apporter des modifications à un site existant, mais que vous n'avez ni le temps ni l'envie pour cela, je peux vous proposer mes services.
Plus de 5 ans d'expérience dans le développement de sites Web professionnels. Travailler avec PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular et d'autres technologies de développement Web.
Expérience dans le développement de projets à différents niveaux : pages de destination, sites Web d'entreprise, boutiques en ligne, CRM, portails. Y compris le support et le développement de projets HighLoad. Envoyez vos candidatures par email [email protégé].
Permettez-moi de commencer par dire que cet article a été écrit pour expliquer comment créer un curseur de défilement d'image pour les pages Web. Cet article n'a en aucun cas un caractère pédagogique, il sert uniquement d'exemple de la manière dont notre objet de réflexion peut être mis en œuvre. Vous pouvez utiliser le code fourni dans cet article comme une sorte de modèle pour des développements similaires, j'espère pouvoir transmettre au lecteur l'essence de ce que j'ai écrit de manière suffisamment détaillée et accessible.
Et maintenant, au point, il n'y a pas si longtemps, j'avais besoin d'installer un curseur sur un site, mais après avoir recherché sur Internet des scripts prêts à l'emploi, je n'ai rien trouvé d'utile, car certains n'ont pas fonctionné comme j'en avais besoin, tandis que d'autres n'ont pas démarré du tout sans erreurs dans la console. Cela me paraissait trop inintéressant d'utiliser des plugins jQuery pour le slider, car... Même si cela résoudra le problème, je n'aurai aucune compréhension du fonctionnement de ce mécanisme, et utiliser un plugin pour un seul curseur n'est pas très optimal. Je n’avais pas non plus vraiment envie de comprendre les scripts tordus, alors j’ai décidé d’écrire mon propre script pour le curseur, que je baliserais moi-même selon mes besoins.
Tout d'abord, nous devons décider de la logique du curseur lui-même, puis procéder à la mise en œuvre. À ce stade, une compréhension claire du fonctionnement de ce mécanisme est très importante, car sans cela, nous ne pouvons pas écrire de code qui fonctionne exactement comme nous. vouloir.
Notre objet principal sera la fenêtre d'affichage, c'est-à-dire un bloc dans lequel nous verrons comment nos images tournent, nous y aurons un slidewrapper, ce sera notre bloc contenant toutes les images alignées sur une seule ligne, et qui changera sa position à l'intérieur de la fenêtre elle-même. 
Ensuite, sur les côtés à l'intérieur de la fenêtre, verticalement au milieu, il y aura des boutons Précédent et Suivant. Lorsque nous cliquons, nous modifierons également la position de notre slidewrapper par rapport à la fenêtre, provoquant ainsi l'effet de défilement des images. Et enfin, le dernier objet sera nos boutons de navigation, situés en bas de la fenêtre. 
Lorsque nous cliquons dessus, nous regarderons simplement le numéro de série de ce bouton et le déplacerons vers la diapositive dont nous avons besoin, toujours en déplaçant le slidewrapper (le décalage se fera en changeant la propriété css transform, dont la valeur sera constamment calculé).
Je pense que la logique de la façon dont tout cela fonctionne devrait être claire après ce que j'ai dit ci-dessus, mais si des malentendus surviennent encore quelque part, alors tout deviendra plus clair dans le code ci-dessous, vous avez juste besoin d'un peu de patience.
Maintenant, écrivons ! Tout d’abord, ouvrons notre fichier d’index et écrivons-y le balisage dont nous avons besoin :
Comme vous pouvez le voir, il n'y a rien de compliqué, bloc pour curseur sert simplement de bloc dans lequel notre curseur sera placé, à l'intérieur se trouve la fenêtre elle-même, dans laquelle se trouve notre slidewrapper, également une liste imbriquée, voici les les diapositives et img sont des images à l'intérieur. Veuillez faire attention au fait que toutes les images doivent avoir la même taille ou au moins les mêmes proportions, sinon le curseur semblera tordu, car ses dimensions dépendent directement des proportions de l'image.
Maintenant, nous devons styliser tout cela ; généralement les styles ne sont pas particulièrement commentés, mais j'ai décidé d'attirer quand même l'attention sur cela afin qu'il n'y ait pas de malentendus à l'avenir.
body ( marge : 0 ; remplissage : 0 ; ) #block-for-slider ( largeur : 800 px ; marge : 0 auto ; marge-haut : 100 px ; ) #viewport ( largeur : 100 % ; affichage : tableau ; position : relative ; débordement : caché ; -webkit-user-select : aucun ; -moz-user-select : aucun ; -ms-user-select : aucun ; -o-user-select : aucun ; user-select : aucun ; ) #slidewrapper ( position : relative ; largeur : calc (100 % * 4); haut : 0 ; gauche : 0 ; marge : 0 ; remplissage : 0 ; -webkit-transition : 1 s ; -o-transition : 1s ; transition : 1s ; -webkit -fonction de synchronisation de transition : facilité d'entrée-sortie ; -o-fonction de synchronisation de transition : facilité d'entrée-sortie ; fonction de synchronisation de transition : facilité d'entrée-sortie ; ) #slidewrapper ul, #slidewrapper li ( margin : 0; remplissage: 0; ) #slidewrapper li ( largeur: calc(100%/4); style de liste: aucun; affichage: en ligne; float: gauche; ) .slide-img ( largeur: 100%; )
Commençons par block-for-slider , c'est encore une fois notre bloc sur la page, que nous allouerons au slider, sa hauteur dépendra de sa largeur et des proportions de notre image, car viewport occupe toute la largeur du bloc pour curseur , alors la diapositive elle-même a la même largeur et, par conséquent, l'image à l'intérieur change de hauteur en fonction de la largeur (les proportions sont conservées). J'ai placé cet élément sur ma page horizontalement au milieu, avec un retrait de 100 pixels à partir du haut, ce qui rend sa position plus pratique pour l'exemple.
L'élément viewport, comme déjà mentionné, occupe toute la largeur de notre bloc pour curseur, il a la propriété overflow:hidden, cela nous permettra de masquer notre flux d'images, qui s'étend au-delà de la fenêtre. 
La propriété CSS suivante est user-select:none , qui vous permet de supprimer la surbrillance bleue des éléments individuels du curseur lorsque vous cliquez plusieurs fois sur les boutons.
Passons au slidewrapper, pourquoi position : relative et non absolue ? Tout est très simple, parce que... si nous choisissons la deuxième option, alors avec la propriété viewport overflow:hidden, absolument rien ne nous apparaîtra, car la fenêtre elle-même ne s'ajustera pas à la hauteur du slidewrapper, c'est pourquoi elle aura height:0 . Pourquoi la largeur est-elle importante et pourquoi la définissons-nous ? Le fait est que nos diapositives auront une largeur égale à 100 % de la fenêtre d'affichage, et pour les aligner, nous avons besoin d'un endroit où elles se tiendront, donc la largeur du slidewrapper doit être égale à 100 % de la largeur de la fenêtre d'affichage. multiplié par le nombre de diapositives (dans mon cas, 4). Quant à transition et transition-timing-function , ici 1s signifie que le changement de position du slidewrapper se produira dans 1 seconde et nous l'observerons, et la facilité d'entrée et de sortie est un type d'animation dans laquelle il se déroule d'abord lentement et accélère jusqu'au milieu, puis ralentit à nouveau, ici vous pouvez définir les valeurs à votre discrétion.
Le bloc de propriétés suivant définit le slidewrapper et ses enfants avec un remplissage nul, aucun commentaire n'est nécessaire ici.
Ensuite, nous stylisons nos diapositives, leur largeur doit être égale à la largeur de la fenêtre, mais puisque... ils sont dans un slidewrapper dont la largeur est égale à la largeur de la fenêtre multipliée par le nombre de diapositives, puis pour obtenir à nouveau la largeur de la fenêtre, nous devons diviser 100 % de la largeur du slidewrapper par le nombre de diapositives (dans mon cas, encore une fois, par 4). Ensuite, nous les transformerons en éléments en ligne en utilisant display:inline et définirons le float à gauche en ajoutant la propriété float:left. À propos de list-style:none, je peux dire que je l'utilise pour supprimer le marqueur par défaut de li , dans la plupart des cas, c'est une sorte de standard.
Avec slide-img tout est simple, l'image occupera toute la largeur du slide, slide s'ajustera à sa hauteur, slidewrapper s'ajustera à la hauteur du slide, et la hauteur de la fenêtre à son tour prendra la valeur de la hauteur. de slidewrapper , donc la hauteur de notre curseur dépendra des proportions de l'image et de la taille du bloc , prévu pour le curseur, dont j'ai déjà parlé ci-dessus.
Je pense qu'à ce stade, nous avons compris les styles, créons pour l'instant un simple diaporama sans boutons, et après nous être assurés qu'il fonctionne correctement, nous les ajouterons et les styliserons.
Ouvrons notre fichier js, qui contiendra le code du slider, n'oubliez pas de connecter jQuery, car Nous écrirons en utilisant ce cadre. D'ailleurs, au moment de la rédaction de cet article, j'utilise jQuery version 3.1.0. Le fichier contenant le script lui-même doit être inclus à la toute fin de la balise body, car nous travaillerons avec des éléments DOM qui doivent d'abord être initialisés.
Pour l'instant, nous devons déclarer quelques variables, l'une stockera le numéro de la diapositive que nous voyons à un certain moment dans la fenêtre, je l'ai appelé slideNow , et la seconde stockera le numéro de ces mêmes diapositives, c'est slideCount .
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
La variable slideNow doit être définie sur une valeur initiale de 1 car Lorsque la page se chargera, en fonction de notre balisage, nous verrons la première diapositive dans la fenêtre.
Dans slideCount nous placerons le nombre d'éléments enfants du slidewrapper, tout est logique ici.
Ensuite, vous devez créer une fonction qui se chargera de basculer les slides de droite à gauche, déclarons-la :
fonction nextSlide() ( )
Nous l'appellerons dans le bloc principal de notre code, auquel nous reviendrons plus tard, mais pour l'instant nous allons dire à notre fonction ce qu'elle doit faire :
function nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit- transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow++; ) )
Tout d’abord, nous vérifions si nous sommes actuellement sur la dernière diapositive de notre flux ? Pour ce faire, nous prenons le nombre de toutes nos diapositives en utilisant $("#slidewrapper").children().length et le vérifions avec le numéro de notre diapositive, si elles sont égales, cela signifie que nous devons commencer à afficher le flux à nouveau, à partir de 1 slide , ce qui signifie que nous modifions la propriété de transformation CSS du slidewrapper en translation(0, 0) , le déplaçant ainsi vers sa position d'origine pour que la première diapositive soit dans notre champ de vision, n'oublions pas non plus à propos de –webkit et –ms pour un affichage multi-navigateur adéquat (voir la référence des propriétés .css). Après cela, n'oubliez pas de mettre à jour la valeur de la variable slideNow, en lui indiquant que la diapositive numéro 1 est visible : slideNow = 1 ;
La même condition consiste à vérifier que le numéro de la diapositive que nous voyons est compris dans le nombre de nos diapositives, mais si d'une manière ou d'une autre cela n'est pas rempli, nous reviendrons à nouveau à la 1ère diapositive.
Si la première condition n'est pas remplie, cela signifie que nous ne sommes actuellement ni sur la dernière diapositive ni sur une diapositive inexistante, ce qui signifie que nous devons passer à la suivante, nous le ferons en déplaçant le slidewrapper vers la gauche. par la valeur égale à la largeur de la fenêtre d'affichage, le décalage se produira à nouveau via la propriété de translation familière, dont la valeur sera égale à "translate(" + translateWidth + "px, 0)" , où translationWidth est la distance par laquelle notre slidewrapper est décalé. Au fait, déclarons cette variable au début de notre code :
var translationWidth = 0;
Après être passé à la diapositive suivante, disons à notre slideNow que nous voyons la diapositive suivante : slideNow++;
À ce stade, certains lecteurs peuvent se demander : pourquoi n'avons-nous pas remplacé $("#viewport").width() par une variable comme slideWidth pour toujours avoir la largeur de notre diapositive à portée de main ? La réponse est très simple, si notre site est adaptatif, alors, en conséquence, le bloc alloué au curseur est également adaptatif, sur cette base nous pouvons comprendre que lors du redimensionnement de la largeur de la fenêtre sans recharger la page (par exemple, allumer le téléphone son côté), la largeur de la fenêtre changera et, en conséquence, la largeur d'une diapositive changera. Dans ce cas, notre slidewrapper sera décalé à la valeur de la largeur qui était à l'origine, ce qui signifie que les images seront affichées en partie ou ne seront pas affichées du tout dans la fenêtre. En écrivant $("#viewport").width() au lieu de slideWidth dans notre fonction, nous la forçons à calculer la largeur de la fenêtre à chaque fois que nous changeons de diapositive, garantissant ainsi que lorsque la largeur de l'écran change brusquement, il défilera jusqu'à la diapositive dont nous avons besoin.
Cependant, nous avons écrit une fonction, maintenant nous devons l'appeler après un certain intervalle de temps, nous pouvons également stocker l'intervalle dans une variable afin que si nous voulons le changer, nous ne puissions changer qu'une seule valeur dans le code :
var slideInterval = 2000 ;
Le temps en js est indiqué en millisecondes.
Écrivons maintenant la construction suivante :
$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));
Tout ne pourrait pas être plus simple ici ; grâce à la construction $(document).ready(function () ()) nous disons que les actions suivantes doivent être effectuées une fois le document complètement chargé. Ensuite, nous appelons simplement la fonction nextSlide avec un intervalle égal à slideInterval à l'aide de la fonction setInterval intégrée.
Après toutes les étapes que nous avons effectuées ci-dessus, notre curseur devrait tourner parfaitement, mais si quelque chose ne va pas, le problème peut provenir soit de la version jQuery, soit d'une connexion incorrecte de n'importe quel fichier. Il n'est pas non plus nécessaire d'exclure que vous ayez commis une erreur quelque part dans le code, je ne peux donc que vous conseiller de tout revérifier. 
En attendant, passons à autre chose, ajoutons à notre slider une fonction telle que l'arrêt du défilement lors du survol du curseur. Pour ce faire, nous devons écrire la chose suivante dans le bloc de code principal (à l'intérieur du $(document).ready( fonction () ()) structure :
$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));
Pour commencer à analyser ce code, nous devons savoir ce qu'est switchInterval. Premièrement, il s'agit d'une variable qui stocke l'appel périodique à la fonction nextSlide, en termes simples, nous avons cette ligne de code : setInterval(nextSlide, slideInterval); , transformé en ceci : switchInterval = setInterval(nextSlide, slideInterval); . Après ces manipulations, notre bloc de code principal a pris la forme suivante :
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval); )); ));
Ici, j'utilise l'événement hover, qui signifie « en survol », cet événement me permet de suivre le moment où je passe le curseur sur un objet, en l'occurrence la fenêtre.
Après survol, j'efface l'intervalle, que j'indique entre parenthèses (c'est notre switchInterval ), puis, séparé par des virgules, j'écris ce que je ferai quand je reculerai le curseur, dans ce bloc j'attribue à nouveau notre switchInterval à un périodique appel à la fonction nextSlide.
Maintenant, si nous testons, nous pouvons voir comment notre curseur réagit au survol, empêchant le curseur de basculer.
Il est maintenant temps d'ajouter des boutons à notre curseur, commençons par les boutons avant et arrière.
Tout d'abord, marquons-les :
Au début, ce balisage peut être incompréhensible, je dirai tout de suite que j'ai enveloppé ces deux boutons dans un div avec la classe prev-next-btns juste pour votre commodité, vous n'êtes pas obligé de faire ça, le résultat ne sera pas changez, maintenant nous allons leur ajouter des styles et tout ira bien C'est clair :
#prev-btn, #next-btn ( position : absolue ; largeur : 50 px ; hauteur : 50 px ; couleur d'arrière-plan : #fff ; rayon de bordure : 50 % ; haut : calc (50 % - 25 px) ; ) #prev- btn:hover, #next-btn:hover ( curseur : pointeur ; ) #prev-btn ( gauche : 20px ; ) #next-btn ( droite : 20px ; )
Tout d'abord, nous positionnons nos boutons en utilisant position:absolute, contrôlant ainsi librement leur position dans notre fenêtre, puis nous spécifierons la taille de ces boutons et utiliserons border-radius pour arrondir les coins afin que ces boutons se transforment en cercles. Leur couleur sera blanche, c'est-à-dire #fff , et leur décalage par rapport au bord supérieur de la fenêtre sera égal à la moitié de la hauteur de cette fenêtre moins la moitié de la hauteur du bouton lui-même (dans mon cas 25px), nous pouvons donc positionnez-les verticalement au centre. Ensuite, nous préciserons que lorsque nous les survolerons, notre curseur se transformera en pointeur, et enfin nous indiquerons à nos boutons individuellement qu'ils doivent être à 20 pixels de leurs bords afin que nous puissions les voir d'une manière qui nous convient. .
Encore une fois, vous pouvez styliser les éléments de la page comme vous le souhaitez, je donne juste un exemple des styles que j'ai décidé d'utiliser.
Après le style, notre curseur devrait ressembler à ceci : 
Revenez ensuite à notre fichier js, où nous décrirons le fonctionnement de nos boutons. Eh bien, ajoutons une fonction supplémentaire, elle nous montrera la diapositive précédente :
fonction prevSlide() ( if (slideNow == 1 || slideNow slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate(" + traduireLargeur + "px, 0)", "-webkit-transform": "translate(" + traduireLargeur + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow = slideCount; ) else ( TranslateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate( " + TranslateWidth + "px, 0)", )); slideNow--; ) )
Il s'appelle prevSlide et ne sera appelé que lorsque l'utilisateur cliquera sur prev-btn. Nous vérifions d'abord si nous sommes sur la 1ère diapositive ou non, ici nous vérifions également si notre diapositiveMaintenant a dépassé la plage réelle de nos diapositives et, si l'une des conditions est vraie, nous passerons à la dernière diapositive, en déplaçant le slidewrapper à la valeur dont nous avons besoin. Nous calculerons cette valeur à l'aide de la formule : (largeur d'une diapositive) * (nombre de diapositives - 1), on prend tout cela avec un signe moins, car nous le déplaçons vers la gauche, il s'avère que la fenêtre va maintenant nous montrer la dernière diapositive. À la fin de ce bloc, nous devons également indiquer à la variable slideNow que la dernière diapositive est désormais visible.
Si nous ne sommes pas sur la première diapositive, alors nous devons reculer de 1, pour cela nous modifions à nouveau la propriété transform de slidewrapper . La formule est : (largeur d'une diapositive) * (numéro de la diapositive actuelle - 2), encore une fois, on prend tout cela avec un signe moins. Mais pourquoi -2, et non -1, devons-nous reculer d'une seule diapositive ? Le fait est que si nous sommes, disons, sur la 2ème diapositive, alors la variable x de la propriété transform:translate(x,0) de notre slidewrapper est déjà égale à la largeur d'une diapositive, si nous lui disons que nous avons besoin pour soustraire 1 du numéro de la diapositive actuelle, nous en obtiendrons à nouveau un, par lequel le slidewrapper a déjà été décalé, nous devrons donc décaler ces mêmes largeurs de fenêtre de 0, ce qui signifie sur slideNow - 2.
Il ne nous reste plus qu'à ajouter ces lignes au bloc de code principal :
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));
Ici, nous suivons simplement si nos boutons ont été cliqués, et dans ce cas nous appelons les fonctions dont nous avons besoin, tout est simple et logique.
Ajoutons maintenant des boutons de navigation aux diapositives et revenons à nouveau au balisage :
Comme vous pouvez le voir, une liste imbriquée est apparue à l'intérieur de la fenêtre, donnons-lui l'identifiant nav-btns , à l'intérieur se trouvent nos boutons de navigation, nous leur attribuerons la classe slide-nav-btn , cependant, nous pouvons terminer avec le balisage, passons aux styles :
#nav-btns ( position : absolue ; largeur : 100 % ; bas : 20 px ; remplissage : 0 ; marge : 0 ; alignement du texte : centre ; ) .slide-nav-btn ( position : relative ; affichage : bloc en ligne ; style de liste : aucun ; largeur : 20 px ; hauteur : 20 px ; couleur d'arrière-plan : #fff ; rayon de bordure : 50 % ; marge : 3 px ; ) .slide-nav-btn:hover ( curseur : pointeur ; )
Nous donnons au bloc nav-btns, dans lequel se trouvent nos boutons, la propriété position:absolute pour qu'il n'étire pas la fenêtre en hauteur, car slidewrapper a la propriété position:relative, nous définissons la largeur à 100% afin de centrer les boutons horizontalement par rapport à la fenêtre en utilisant text-align:center , puis en utilisant la propriété bottom nous faisons savoir à notre bloc qu'il doit être à distance de 20px à partir du bord inférieur.
Avec les boutons, nous faisons la même chose qu'avec les diapositives, mais maintenant nous leur donnons display:inline-block , car avec display:inline, ils ne répondent pas à la largeur et à la hauteur car sont dans un bloc positionné de manière absolue. Rendons-les blancs et, en utilisant le rayon de bordure déjà familier, donnons-leur la forme d'un cercle. Lorsque nous les survolerons, nous modifierons l'apparence de notre curseur pour l'affichage habituel.
Passons maintenant à la partie jQuery :
Tout d'abord, déclarons une variable navBtnId, qui stockera l'index du bouton sur lequel nous avons cliqué :
var navBtnId = 0 ;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) );
Ici, quand on clique sur notre slide-nav-btn, on appelle une fonction qui attribue tout d'abord à la variable navBtnId l'index du bouton cliqué, c'est-à-dire son numéro de série, puisque le compte à rebours commence à zéro, puis si on cliquez sur le deuxième bouton, puis il est écrit dans la valeur navBtnId 1. Ensuite, nous effectuons une vérification où nous ajoutons un au numéro de série du bouton pour obtenir un numéro comme si le compte à rebours commençait non pas à partir de 0, mais à partir de 1, nous comparez ce numéro avec le numéro de la diapositive actuelle, s'ils correspondent, nous n'effectuerons aucune action, car la diapositive souhaitée est déjà dans la fenêtre.
Si la diapositive dont nous avons besoin ne se trouve pas dans le champ de vision de la fenêtre d'affichage, nous calculons la distance dont nous devons déplacer le slidewrapper vers la gauche, puis modifions la valeur de la propriété de transformation CSS pour traduire (la même distance en pixels, 0 ). Nous l'avons déjà fait plus d'une fois, il ne devrait donc y avoir aucune question. A la fin, nous enregistrons à nouveau la valeur de la diapositive actuelle dans la variable slideNow ; cette valeur peut être calculée en ajoutant un à l'index du bouton cliqué.
C'est tout, en fait, si quelque chose n'est pas clair, je laisserai un lien vers jsfiddle, où tout le code écrit dans le matériel sera fourni.
Merci pour votre attention!
Balises : Ajouter des balises
Un slider simple et léger (21 Ko compressé), écrit en Javascript pur, sans aucune dépendance, c'est-à-dire fonctionne sans jQuery.
Testé dans les navigateurs suivants :
- Chrome 26.0
- Firefox 20.0
- Safari 5.1.7
- Internet Explorer 10
- Opéra 16.0
Il existe une prise en charge incomplète pour IE8/9 (aucun effet).
Particularités- Vous pouvez ajouter un nombre illimité de curseurs à une 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 le curseur, vous pouvez basculer les curseurs avec des flèches.
- Prise en charge des événements tactiles mobiles.
Avant la balise de fermeture, vous devez inclure le fichier slidr.js ou slidr.min.js.
Balisage HTML
slidr.js peut fonctionner avec n'importe quel élément de bloc en ligne, en bloc en ligne qui a un attribut id. Tous les éléments enfants de premier niveau avec l'attribut data-slidr sont autorisés, par exemple :
- pomme
- banane
- noix de coco
pomme banane noix de coco Javascript Après avoir connecté slidr.js, l'objet global slidr sera disponible. Le moyen le plus simple de créer un slider :
Slidr.create("slidr-id").start();
Appelez en définissant 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" ), touch: true, transition: "cube" )).start();
ParamètresTous les paramètres disponibles pour slidr.js sont présentés dans le tableau ci-dessous.
| après | fonction | fonction de rappel après le changement de diapositive | |
| avant | fonction | fonction de rappel avant le changement de diapositive | |
| chapelure | bouffon | FAUX | Afficher le fil d'Ariane pour les contrôles à diapositives. vrai ou faux . |
| contrôles | chaîne | frontière | Placement des flèches pour contrôler les diapositives. bordure , coin ou aucun . |
| direction | chaîne | horizontal | Direction par défaut pour les nouvelles diapositives. horizontal ou h, vertical ou v. |
| disparaître | bouffon | vrai | Activez l’effet d’assombrissement pour changer de diapositive (fondu entrant/sortant). vrai ou faux . |
| clavier | bouffon | FAUX | Activez le changement d’entrepôt à l’aide du clavier. vrai ou faux . |
| débordement | bouffon | FAUX | Activer le débordement pour un bloc avec un curseur. vrai ou faux . |
| pause | bouffon | FAUX | Ne modifiez pas automatiquement les diapositives au survol de la souris (vous devez exécuter auto()). vrai ou faux . |
| thème | chaîne | #fff | Couleur des curseurs (fil d'Ariane et flèches). #hexcode ou rgba(value) . |
| Horaire | objet | {} | Horaires d’animation personnalisés à appliquer. ("transition": "timing") . |
| touche | bouffon | FAUX | Activez les commandes tactiles sur les appareils mobiles. vrai ou faux . |
| transition | chaîne | linéaire | Effet de changement de diapositive. cube , linéaire , fondu ou aucun . |
Les fonctions de rappel after et before reçoivent les données suivantes :
( id : "slidr-id", in : ( 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.jsL'espace de noms global slidr fournit les fonctionnalités suivantes :
/** * Version actuelle * @return (string) major.minor.patch. */ fonction version() (); /** * Effets de transition disponibles. * @return (Array) de transitions. */ fonction transitions() (); /** * Crée et renvoie un Slidr. * Appeler cette fonction deux fois sur le même élément renverra un objet Slidr déjà créé. * ID d'élément @param (string) pour Slidr. * @param (Object=) opt_settings Paramètres du curseur. */ function create(id, opt_settings) ();
API Slider // Initialiser Slidr avec ses paramètres var s = slidr.create("slidr-api-demo", ( fil d'Ariane : vrai, débordement : vrai )); // Ajoutez des diapositives horizontales avec un effet de transition standard. // dupliquer l'élément de tableau "un" à la fin permet à Slidr // de faire défiler les diapositives à l'infini s.add("h", ["un", "deux", "trois", "un"]); // Ajoute une diapositive verticale avec un effet de transition de cube. s.add("v", ["cinq", "quatre", "trois", "cinq"], "cube"); // Lance le curseur. s.start();Entrée courte
Var s = slidr.create("slidr-api-demo", ( fil d'Ariane : vrai, débordement : vrai )).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 présentée ci-dessous
/** * Démarrez le Slider ! * Recherche automatiquement les diapositives à créer si rien n'a été ajouté avant d'appeler start(). * @param (string) opt_start `data-slidr` identifiant pour démarrer. * @return (this) */ function start(opt_start) (); /** * Vérifiez si nous pouvons glisser. * @param (string) à côté d'une direction ("haut", "bas", "gauche", "droite") ou d'un identifiant `data-slidr`. * @return (booléen) */ function canSlide(next) (); /** * Glisser! * @param (string) à côté d'une direction ("haut", "bas", "gauche", "droite") ou d'un identifiant `data-slidr`. * @return (this) */ function slide(next) (); /** * Ajoute un ensemble de diapositives. * @param (chaîne) direction `horizontal || h` ou `verticale || v`. * @param (Array) ids Une liste d'identifiants `data-slidr` à ajouter à Slidr. Les diapositives doivent être des enfants directs du Slidr. * @param (string=) opt_transition La transition à appliquer entre les diapositives, ou utilise la valeur par défaut. * @param (boolean=) opt_overwrite S'il faut écraser les mappages/transitions de diapositives existants en cas de conflits. * @return (this) */ function add(direction, ids, opt_transition, opt_overwrite) (); /** * Automatiquement passer à la diapositive suivante après un certain délai. Appelle start() s'il n'est pas déjà appelé. * @param (int=) opt_msec Le nombre de millisecondes entre chaque transition de diapositive. La valeur par défaut est 5000 (5 secondes). * @param (string= ) opt_direction "haut", "bas", "gauche" ou "droite". La valeur par défaut est "droite". * @param (string=) opt_start L'identifiant `data-slidr` à partir duquel démarrer (ne fonctionne que si auto est appelé pour démarrer le Slidr). * @return (this) */ function auto(opt_msec, opt_direction, opt_start) (); /** * Arrêtez la transition automatique si elle est activée. * @return (this) */ function stop() (); /** * Définissez des horaires 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 "easy-in 0,5s"). 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 modifier la disposition. "frontière", "coin" ou "aucun". * @return (this) */ function contrôles(opt_scheme) ();
Pages défilées lors du changement de diapositivesCe bug désagréable apparaît dans certains navigateurs. Pour résoudre ce problème, vous devez ajouter un style au corps :
Corps (débordement : caché ; )
Redimensionnement dynamiqueSlidr lui-même « comprend » si le curseur doit être redimensionné pour s'adapter à l'image. Si le bloc curseur a des dimensions spécifiées, Slidr ne les modifiera pas automatiquement. Si les propriétés min-width et min-height sont spécifiées, alors le curseur modifiera sa taille pour s'adapter au contenu, en tenant compte de ces valeurs. Dans le cas contraire, la taille sera déterminée automatiquement.
Redimensionnement automatique
bien magnifique incroyable
Dimensions statiques
bien magnifique incroyable
Contrôles SliderLa disposition des contrôles est la suivante :
Vous pouvez personnaliser n'importe quel contrôle de curseur à l'aide des sélecteurs CSS :
À part .slidr-control.right (largeur : 50px !important; hauteur : 50px !important; haut : 50 % !important; marge-haut : -25px !important; droite : -25px !important; rayon de bordure : 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èche est implémenté à l'aide du pseudo-sélecteur :after, donc pour le masquer, utilisez le code suivant :
// Masquer une seule flèche dans un seul contrôleur. apart .slidr-control.right:after ( border-color: transparent !important; ) // Masquer toutes les flèches dans un seul contrôleur. de côté .slidr-control:after ( border-color: transparent !important; ) // Masquer toutes les flèches Slidr. de côté .slidr-control:after ( border-color: transparent !important; )
Fil d'Ariane SliderLe fil d'Ariane a un balisage HTML simple. Chaque ul représente la ligne entière et chaque li représente un fil d'Ariane distinct :
...
Styliser le fil 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; ) apart .slidr-breadcrumbs li.active ( background-color: black !important; )
LicenceCe logiciel est gratuit à utiliser sous la licence MIT.
Mais puisque nous passons en revue les bases de JS, pour étudier les bases, je vais décrire comment créer un slider simple en utilisant uniquement le langage JavaScript. Eh bien, commençons à analyser le matériel !
Quels types de curseurs existe-t-il et où pourraient-ils être nécessaires ?La création de galeries pratiques pour visualiser les images est requise sur tous les services Web contenant au moins quelques photographies. Il peut s'agir de boutiques en ligne, de sites Web de portfolio, de services d'information et de formation, de sites Web d'entreprises et d'établissements de divertissement avec reportages photo, etc.
Cependant, il s'agit d'une utilisation standard des curseurs. Ces technologies sont également utilisées pour attirer les clients vers des biens et des services promotionnels ou pour décrire les avantages des entreprises.
La plupart du temps, les clients demandent à implémenter des galeries de type « Carrousel » sur les pages Web. Il s'agit d'un outil pratique pour visualiser des images en grand format avec la possibilité pour l'utilisateur de faire avancer et reculer les diapositives. Dans ce cas, les images elles-mêmes changent généralement automatiquement après un certain temps. Ce mécanisme est appelé carrousel car l’affichage des images se répète en cercle.
Aujourd'hui, si vous le souhaitez, vous pouvez trouver sur Internet les plugins les plus insolites et les plus attractifs pour visualiser un ensemble de photos.
Activité indépendanteEh bien, commençons maintenant à créer notre propre curseur. À ce stade du didacticiel, je vous suggère d'utiliser du JavaScript pur pour l'implémenter. Cela changera automatiquement les images en cercle.
Ci-dessous, j'ai joint le code de ma candidature. Je vous ai laissé des commentaires pendant que je codais.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | /*Je décris l'apparence du cadre, base du futur slider */ #slides( position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010 , 0 0 10px bleu, 0 0 15px #010, 0 0 35px #010; ) /* Je modifie l'affichage des images*/ img ( width: auto; height: 390px; padding: 13px; ) / * J'indique que le contenu des éléments de la liste sera affiché au centre de l'élément parent, c'est-à-dire dans ce cas, au centre de l'élément ul - la base des diapositives */ li ( text-align: center; ) /* Je décris l'apparence des diapositives elles-mêmes */ .slide( position: absolue; opacité : 0 ; haut : 0px ; gauche : 0px ; hauteur : 100 % ; z-index : 3 ; largeur : 100 % ; arrière-plan : bleu ; -moz-transition : opacité 1,5 s ; transition : opacité 1,5 s ; -webkit-transition : opacité 1,5s; ) /*Lors de l'affichage, un objet devient visible et passe au premier plan*/ .showing( opacité : 1 ; z-index : 4 ; ) |
Sélecteur d'image automatique /*Décrit l'apparence du cadre, la base du futur slider */ #slides( position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box- shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; ) /* Modification de l'affichage des images*/ img ( width: auto; height: 390px; padding: 13px; ) /* Indique que les éléments de la liste de contenu seront affichés au centre de l'élément parent, c'est-à-dire dans ce cas, au centre de l'élément ul - la base des diapositives */ li ( text-align: center; ) /* Je décris l'apparence des diapositives elles-mêmes */ .slide( position: absolue; opacité : 0 ; haut : 0px ; gauche : 0px ; hauteur : 100 % ; z-index : 3 ; largeur : 100 % ; arrière-plan : bleu ; -moz-transition : opacité 1,5 s ; transition : opacité 1,5 s ; -webkit-transition : opacité 1,5s; ) /*Lors de l'affichage, un objet devient visible et passe au premier plan*/ .showing( opacité : 1 ; z-index : 4 ; )
J'espère que vous n'avez eu aucun problème avec le code CSS et HTML. Mais je considère qu'il est nécessaire de démonter le travail du script. Passons donc au déchiffrement de ce qui a été écrit.
Ainsi, d'abord, en utilisant la méthode querySelectorAll, j'attribue à la variable MySlider une liste de tous les éléments dans la plage spécifiée. Indique cette entrée
document.querySelectorAll("#slides .slide")
Ainsi, MySlider stocke une collection de quatre éléments.
Ensuite, je précise quelle image commencer à afficher en définissant la variable currentPicture sur zéro. Ensuite, j'indique que le changement de diapositive se produit en 2,7 secondes et que la fonction de traitement nextSlide doit être appelée.
Passons à la fonction elle-même.
Dans un premier temps, pour l'élément de liste actuel, je change la description des classes, c'est-à-dire Je réécris « diaporama » en « slide ». L’image devient alors invisible.
Maintenant, je définis un nouvel élément de collection qui sera affiché à l'écran. Pour ce faire, je prends la position actuelle +1. Vous avez peut-être remarqué que j'utilise également la division avec un reste (%) par le nombre de diapositives disponibles. Ce tour des oreilles est nécessaire pour démarrer le spectacle dans un nouveau cercle. Voilà à quoi cela ressemblerait littéralement.