Pour commencer, cet article a été écrit dans le but d'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 de tels développements, j'espère que je pourrai transmettre au lecteur de manière suffisamment détaillée et accessible toute l'essence de ce que j'ai écrit.
Et maintenant, au point, il n'y a pas si longtemps, j'avais besoin de mettre un curseur sur un site, mais lorsque j'ai cherché sur Internet des scripts prêts à l'emploi, je n'ai rien trouvé de valable, parce que. 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. Utiliser plugins jQuery pour un slider, ça me paraissait trop inintéressant, parce que. Bien que je résous le problème avec cela, je n'aurai aucune compréhension du fonctionnement de ce mécanisme, et l'utilisation du plugin pour le plaisir d'un curseur n'est pas très optimale. Je ne voulais pas non plus vraiment comprendre les scripts tordus, alors j'ai décidé d'écrire mon propre script pour le curseur, que je marquerai 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, il est très important de bien comprendre le fonctionnement de ce mécanisme, car sans lui, nous ne pouvons pas écrire de code qui fonctionne exactement la façon dont nous voulons.
Notre objet principal sera fenêtre, c'est-à-dire le bloc dans lequel nous verrons comment nos images tournent, nous y aurons emballage de diapositives, ce sera notre bloc contenant toutes les images alignées sur une ligne, et qui changera de position à l'intérieur du fenêtre.
Plus loin, sur les côtés à l'intérieur fenêtre, verticalement au milieu, il y aura des boutons de va-et-vient, une fois cliqués, nous changerons également la position de notre emballage de diapositives relativement 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 fenêtre.
En cliquant dessus, nous allons simplement regarder le numéro de série de ce bouton et passer à la diapositive dont nous avons besoin à nouveau en déplaçant emballage de diapositives(le changement se fera par un changement transformer les propriétés css, dont la valeur sera constamment calculée).
Je pense que la logique de tout cela devrait être claire après ce que j'ai dit ci-dessus, mais s'il y a encore des malentendus quelque part, alors tout sera clarifié dans le code, vous avez juste besoin d'un peu de patience.
Maintenant écrivons ! Tout d'abord, ouvrons notre fichier index et écrivez le balisage dont nous avons besoin ici:
Comme vous pouvez le voir, rien de compliqué bloc pour curseur sert exactement le même bloc dans lequel notre curseur sera placé, à l'intérieur il est déjà fenêtre, qui contient notre emballage de diapositives, alias liste imbriquée, ici li sont des diapositives et image- images à l'intérieur d'eux. 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 aura l'air tordu. ses dimensions dépendent directement des proportions de l'image.
Maintenant, nous devons styliser le tout, généralement les styles ne sont pas particulièrement commentés, mais j'ai décidé de me concentrer là-dessus, afin qu'il n'y ait pas de malentendu à l'avenir.
body (marge : 0 ; rembourrage : 0 ; ) #block-for-slider ( width : 800px ; margin : 0 auto ; margin-top : 100px; ) #viewport ( width : 100 % ; display: table; position: relative; débordement : masqué ; -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 ; rembourrage : 0 ; -webkit-transition : 1s ; -o-transition : 1s ; transition : 1s ; -webkit -transition-timing-function : entrée-sortie ; -o-transition-timing-function : entrée-sortie ; transition-timing-function : entrée-sortie facile ; ) #slidewrapper ul, #slidewrapper li ( marge : 0 ; rembourrage : 0 ; ) #slidewrapper li ( largeur : calc(100 %/4); style de liste : aucun ; affichage : en ligne ; flottant : gauche ; ) .slide-img ( largeur : 100 % ; )
Commençons avec bloc pour curseur, je le répète, c'est notre bloc sur la page, que nous allons assigner sous le slider, sa hauteur dépendra de sa largeur et des proportions de notre image, car fenêtre occupe toute la largeur bloc pour curseur, puis lui-même glisser 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, 100px en retrait d'en haut, ce qui rend sa position plus pratique pour l'exemple.
Élément fenêtre, comme déjà mentionné, occupe toute la largeur de notre bloc pour curseur, il a la propriété débordement caché, cela nous permettra de masquer notre flux d'images qui va au-delà de la fenêtre d'affichage. 
Suivant propriété css - sélection de l'utilisateur : aucune, vous permet de vous débarrasser de la surbrillance bleue des éléments individuels du curseur en cliquant plusieurs fois sur les boutons.
Passons à emballage de diapositives Pourquoi poste:relatif, mais non absolu? Tout est très simple, parce que. si nous choisissons la deuxième option, alors avec la propriété débordement de fenêtre:masqué rien ne nous semblera, tk. moi même fenêtre ne s'adaptera pas à la hauteur emballage de diapositives, grâce à quoi il aura hauteur: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 disposer en ligne, nous avons besoin d'un endroit où ils se tiendront, donc la largeur emballage de diapositives devrait être égal 100 % de largeur de fenêtre multiplié par le nombre de diapositives (4 dans mon cas). Concernant transition et fonction de synchronisation de transition, alors ici 1s signifie que le changement de position emballage de diapositives se produira dans 1 seconde et nous l'observerons, et facilité d'entrée- un type d'animation dans lequel il va lentement au début, accélère au milieu, puis ralentit à nouveau, ici vous pouvez déjà définir les valeurs par vous-même.
Le prochain bloc de jeux de propriétés emballage de diapositives et ses éléments enfants sont complétés par des zéros, les commentaires sont superflus ici.
Ensuite, nous allons styliser nos diapositives, leur largeur doit être égale à la largeur fenêtre, mais parce que ils sont dans emballage de diapositives, dont la largeur est égale à la largeur de la fenêtre multipliée par le nombre de diapositives, puis pour obtenir la largeur fenêtre encore une fois, nous avons besoin de 100% de la largeur emballage de diapositives divisez par le nombre de diapositives (dans mon cas, encore une fois, par 4). Après les avoir transformés en éléments en ligne avec affichage:en ligne et définissez le wrap à gauche en ajoutant la propriété flotteur : gauche. Pro style de liste : aucun Je peux dire que je l'utilise pour supprimer le marqueur par défaut de li, dans la plupart des cas est une sorte de norme.
Alors diapositive-img c'est simple, l'image prendra toute la largeur glisser, glisser s'adapter à sa hauteur emballage de diapositives ajuster à la hauteur glisser, et la hauteur fenêtre prendra à son tour la valeur de la hauteur emballage de diapositives, ainsi 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 que nous avons compris les styles à ce sujet, pour l'instant nous allons faire un simple diaporama sans boutons, et après nous être assurés qu'il fonctionne correctement, nous allons les ajouter et les styliser.
Ouvrons notre fichier js, qui contiendra le code du curseur, n'oubliez pas d'inclure jQuery, car nous écrirons en utilisant ce cadre. Au fait, au moment d'écrire ces lignes, j'utilise la version jQuery 3.1.0. Le fichier lui-même avec le script doit être inclus à la toute fin de la balise corps, car nous allons travailler 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 pendant fenêtre je l'ai appelée slideNow, et le second stockera le nombre de ces mêmes diapositives, ce slideCount.
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
variable slideNow il est nécessaire de mettre la valeur initiale à 1, car lorsque la page se charge, en fonction de notre balisage, nous verrons la première diapositive dans fenêtre.
V slideCount nous mettrons le nombre d'enfants emballage de diapositives, tout est logique ici.
Ensuite, vous devez créer une fonction qui se chargera de basculer les diapositives de droite à gauche, déclarons-la :
fonction nextSlide() ( )
Nous l'appellerons dans le bloc principal de notre code, auquel nous arriverons, mais pour l'instant nous dirons à notre fonction ce qu'elle doit faire :
function nextSlide() ( if (slideNow == slideCount || slideNow<= 0 || 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 numéro de toutes nos diapositives en utilisant $("#slidewrapper").enfants().longueur et comparez-le avec le numéro de notre diapositive, s'ils sont égaux, cela signifie que nous devons recommencer à montrer la bande, à partir de 1 diapositive, ce qui signifie que nous changeons transformer la propriété cssà emballage de diapositives sur le traduire (0, 0), le déplaçant ainsi dans sa position d'origine afin que la première diapositive soit dans notre champ de vision, n'oublions pas non plus --webkit et --ms pour un affichage adéquat entre navigateurs (voir référence de propriété css). Après cela, n'oubliez pas de mettre à jour la valeur de la variable slideNow, l'informant que la diapositive numéro 1 est en vue : slideNow = 1 ;
La même condition inclut de vérifier que le numéro de la diapositive que nous voyons est dans le nombre de nos diapositives, mais si cela n'est pas fait, 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écalant emballage de diapositives laissé par une valeur égale à la largeur fenêtre, le décalage se produira à nouveau via la propriété familière Traduire, dont la valeur sera égale à "translate(" + translateWidth + "px, 0)", où translateWidth est la distance que notre emballage de diapositives. Au fait, déclarons cette variable au début de notre code :
var translateWidth = 0 ;
Après être passé à la diapositive suivante, disons à notre diapositiveMaintenant que nous voyons la diapositive suivante d'affilée : slideNow++ ;
À ce stade, certains lecteurs se demandent peut-être pourquoi nous n'avons pas remplacé $("#viewport").width()à une variable, par exemple slideWidth toujours avoir la largeur de notre toboggan à 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, tourner le téléphone sur le côté), la largeur fenêtre changera et, en conséquence, la largeur d'une diapositive changera. Dans ce cas, notre emballage de diapositives sera décalé à la valeur de la largeur qui était à l'origine, ce qui signifie que les images seront affichées par parties ou pas affichées du tout dans fenêtre. Écrire dans notre fonction $("#viewport").width()à la place de slideWidth nous lui faisons calculer la largeur à chaque fois que vous changez de diapositive fenêtre, fournissant ainsi, avec un changement brusque de la largeur de l'écran, le défilement jusqu'à la diapositive dont nous avons besoin.
Cependant, nous avons écrit la fonction, maintenant nous devons l'appeler après un certain intervalle de temps, nous pouvons également stocker l'intervalle dans une variable, de sorte que si nous voulons le changer, ne changeons qu'une seule valeur dans le code :
var slideInterval = 2000;
Le temps en js est spécifié en millisecondes.
Écrivons maintenant la structure suivante :
$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));
Tout n'est nulle part plus facile, nous en sommes à la conception $(document).prêt(fonction()()) nous disons que les actions suivantes doivent être effectuées après le chargement complet du document. Ensuite, nous appelons simplement la fonction diapositive suivante avec un intervalle égal à slideInterval, en utilisant la fonction intégrée setInterval.
Après toutes les étapes que nous avons effectuées ci-dessus, notre curseur devrait tourner parfaitement, mais si quelque chose ne va pas pour vous, le problème peut être soit dans la version jQuery, ou dans la mauvaise connexion de tous les fichiers. Il n'est pas non plus nécessaire d'exclure que vous puissiez faire une erreur quelque part dans le code, donc je ne peux que vous conseiller de tout revérifier. 
En attendant, passons à autre chose, ajoutons à notre curseur une fonction telle que l'arrêt du défilement lors du survol, pour cela nous devons écrire dans le bloc de code principal (à l'intérieur de la construction $(document).ready(function () ())) une telle chose:
$("#viewport").hover(function() ( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));
Pour commencer à analyser ce code, nous devons savoir ce qui est switchInterval. Tout d'abord, il s'agit d'une variable qui stocke un 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 flotter, qui signifie "au survol", cet événement permet de suivre le moment où je survole un objet, en l'occurrence sur fenêtre.
Après avoir survolé, j'efface l'intervalle que j'indiquerai entre parenthèses (c'est notre switchInterval), puis, séparés par des virgules, j'écris ce que je ferai lorsque je reculerai le curseur, dans ce bloc j'attribue à nouveau à notre switchInterval appel de fonction périodique diapositive suivante.
Maintenant, si nous vérifions, nous pouvons voir comment notre curseur réagit au survol, empêchant les diapositives de basculer.
Il est donc temps d'ajouter des boutons à notre curseur, commençons par les boutons de va-et-vient.
Marquons-les d'abord :
Au début, ce balisage est peut-être incompréhensible, je dirai tout de suite que j'ai enroulé ces deux boutons en un seul div avec classe prev-next-btns juste pour votre commodité, vous ne pouvez pas faire cela, le résultat ne changera pas, nous allons maintenant leur ajouter des styles et tout deviendra clair :
#prev-btn, #next-btn ( position : absolue ; largeur : 50px ; hauteur : 50px ; background-color : #fff ; border-radius : 50% ; top : calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( curseur : pointeur; ) #prev-btn ( gauche : 20px; ) #next-btn ( droite : 20px; )
Nous positionnons d'abord nos boutons via position:absolue, ainsi nous contrôlerons librement leur position à l'intérieur de notre fenêtre, puis spécifiez les tailles de ces boutons et en utilisant rayon de bordure arrondissez les coins pour que ces boutons se transforment en cercles. Leur couleur sera blanche, c'est-à-dire #fff, et leur indentation à partir du bord supérieur fenêtre sera égal à la moitié de la hauteur de ce fenêtre moins la moitié de la hauteur du bouton lui-même (25 pixels dans mon cas), afin que nous puissions les centrer verticalement. Ensuite, nous préciserons qu'au survol, notre curseur se changera en aiguille et enfin, disons à nos boutons individuellement qu'ils doivent être reculés de 20 pixels par rapport à leurs bords afin que nous puissions les voir comme nous le souhaitons.
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 : 
Ensuite, nous revenons à notre fichier js, où nous décrivons le fonctionnement de nos boutons. Eh bien, ajoutons une autre fonction, elle nous montrera la diapositive précédente :
function prevSlide() ( if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0 )", "-webkit-transform": "translate(" + translateWidth + "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--; ) )
On l'appelle prevSlide, il ne sera appelé qu'en cliquant sur btn précédent. Nous vérifions d'abord si nous sommes sur la 1ère diapositive ou non, ici nous vérifions également si notre slideNow au-delà des limites de la plage réelle de nos diapositives et, si l'une des conditions fonctionne, nous passerons à la dernière diapositive, en déplaçant emballage de diapositivesà la valeur que nous voulons. Nous allons calculer cette valeur à l'aide de la formule : (largeur d'une diapositive) * (nombre de diapositives - 1), nous prenons tout cela avec un signe moins, car en le déplaçant vers la gauche, il s'avère que fenêtre va maintenant nous montrer la dernière diapositive. À la fin de ce bloc, nous devons également dire à la variable slideNow que nous avons maintenant la dernière diapositive dans notre champ de vision.
Si nous ne sommes pas sur la première diapositive, nous devons reculer de 1, pour cela, nous modifions à nouveau la propriété transformation slidewrapper. La formule est: (largeur d'une diapositive) * (numéro de la diapositive actuelle - 2), tout cela, encore une fois, est pris avec un signe moins. Mais pourquoi -2, et non -1, avons-nous besoin de reculer exactement de la même diapositive ? Le fait est que si nous sommes, disons, sur la 2e diapositive, alors la variable X Propriétés transformer:translate(x,0) notre emballage de diapositives est déjà égal à la largeur d'une diapositive, si nous lui disons que nous devons soustraire 1 du numéro de la diapositive actuelle, nous obtiendrons à nouveau l'unité par laquelle nous avons déjà décalé emballage de diapositives, vous devrez donc décaler de 0 ces mêmes largeurs fenêtre, ce qui signifie sur slideNow - 2.
Nous devons maintenant ajouter ces lignes au bloc de code principal :
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));
Ici, nous gardons simplement une trace de savoir si un clic a été effectué sur nos boutons, et dans ce cas, nous appelons les fonctions dont nous avons besoin, tout est simple et logique.
Ajoutons maintenant des boutons de navigation de diapositive, revenons au balisage :
Comme vous pouvez le voir, à l'intérieur fenêtre une liste imbriquée est apparue, donnez-lui un identifiant nav-btns, à l'intérieur li- nos boutons de navigation, nous leur attribuerons une classe slide-nav-btn, cependant, vous pouvez terminer avec le balisage, passons aux styles :
#nav-btns ( position : absolue ; largeur : 100 % ; bas : 20 px ; rembourrage : 0 ; marge : 0 ; alignement du texte : centre ; ) .slide-nav-btn ( position : relative ; affichage : bloc en ligne ; list-style : aucun ; largeur : 20 px ; hauteur : 20 px ; couleur d'arrière-plan : #fff ; border-radius : 50 % ; marge : 3 px ; ) .slide-nav-btn:hover ( curseur : pointeur ; )
bloc nav-btns, dans lequel se trouvent nos boutons, nous donnons la propriété position:absolue pour qu'il ne s'étire pas fenêtre en hauteur, car à emballage de diapositives propriété poste:relatif, nous fixons la largeur à 100 % de sorte qu'avec aligner le texte : centrer centrer les boutons horizontalement par rapport à fenêtre, puis en utilisant la propriété bas nous indiquons clairement à notre bloc qu'il doit être à une distance de 20 pixels du bord inférieur.
Avec les boutons, on fait la même chose qu'avec les slides, mais maintenant on leur demande affichage:bloc en ligne, car à affichage:en ligne ils ne répondent pas largeur et la taille, car sont dans un bloc en position absolue. Nous rendrons leur couleur blanche et avec l'aide de ceux qui nous sont déjà familiers rayon de bordure Donnons-leur une forme de cercle. En les survolant, nous allons changer l'apparence de notre curseur pour l'affichage habituel.
Et maintenant, passons à jQuery - Pièces:
Tout d'abord, déclarons la 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; ) ));
Nous y sommes lorsque vous cliquez sur notre slide-nav-btn appeler une fonction qui affecte d'abord à une variable navBtnId l'index du bouton cliqué, c'est-à-dire son numéro de série, puisque le compte à rebours part de zéro, puis si on clique sur le second bouton, alors en navBtnId la valeur est écrite 1. Ensuite, nous effectuons une vérification, où nous ajoutons un au nombre ordinal du bouton pour obtenir un tel nombre, comme si le compte à rebours n'était pas de 0, mais de 1, nous comparons ce nombre avec le nombre de la diapositive actuelle, si elles correspondent, nous n'entreprendrons aucune action, car la diapositive souhaitée est déjà dans fenêtre.
Si la diapositive dont nous avons besoin n'est pas visible fenêtre, puis nous calculons la distance dont nous devons nous déplacer emballage de diapositives vers la gauche, puis modifiez la valeur propriétés css transformer pour traduire(la même distance en pixels, 0). Nous l'avons déjà fait plus d'une fois, donc des questions ne devraient pas se poser. À la fin, nous sauvegardons à nouveau la valeur de la diapositive actuelle dans une variable slideNow, cette valeur peut être calculée en ajoutant un à l'indice du bouton cliqué.
C'est en fait tout, si quelque chose n'est pas clair, je laisse un lien vers jsfiddle, où tout le code écrit dans le matériel sera fourni.
Merci pour votre attention!
Mots clés:
- curseur jquery
- CSS
- animation css3
- html
Bonjour chers lecteurs du blog. Aujourd'hui, je vous présente un utile une sélection de curseurs jQuery gratuits avec des exemples. Si vous décidez tout de même de mettre un slider 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 avec des exemples, et chacun d'eux, vous pouvez essayer en action. En général, je ne vais pas distraire, choisissez :-)
Curseur d'image jQuery simple
Le curseur de vignette le plus courant et le moins volumineux sur votre site.
Curseur de vignettes jQuery
Un curseur très simple et intéressant avec des vignettes, qui convient à presque tous les designs.
Beau curseur de site Web
Grand et très beau curseur d'image avec défilement de texte intéressant.
Curseur jQuery de base
Le curseur le plus courant et le plus simple pour votre ressource
Grand curseur avec description
Curseur spectaculaire par lequel il est irréaliste de passer.
Curseur d'image jQuery et description
Curseur de texte debout et élégant avec des images et un bel effet de défilement.
Faire défiler les images avec des conseils
Des images défilantes intéressantes qui défilent en continu et en douceur. Par défaut, il existe des images de différents fruits que vous pouvez changer pour vous-même.
Curseur grande flèche jQuery
Un slider intéressant avec de grosses flèches roses qui changent de taille en zoomant sur l'image.
1. Excellent diaporama jQuery
Grand diaporama spectaculaire utilisant la technologie jQuery.
2. Plug-in jQuery "Scale Carousel"
Diaporama zoomable avec jQuery. Vous pouvez définir les dimensions du diaporama qui vous convient le mieux.
3. Plug-in jQuery "slideJS"
Curseur d'image avec description textuelle.
4. Plugin "JSliderNews"
5. Curseur CSS3 jQuery
Lorsque vous survolez les flèches de navigation, une vignette ronde de la diapositive suivante apparaît.
6. Joli curseur jQuery "Cycle de présentation"
Curseur jQuery avec indicateur de chargement d'image. Le changement de diapositive automatique est fourni.
7. Plugin jQuery Parallax Slider
Curseur avec effet de fond 3D. Le point culminant de ce curseur est le mouvement de l'arrière-plan, qui se compose de plusieurs couches, chacune défilant à une vitesse différente. Le résultat est une imitation d'un effet volumétrique. C'est très joli, vous pouvez voir par vous-même. L'effet s'affiche plus facilement dans les navigateurs tels que : Opera, Google Chrome, IE.
8. Curseur jQuery frais et léger "bxSlider 3.0"
Sur la page de démonstration, dans la section "exemples", vous pouvez trouver des liens vers toutes les utilisations possibles de ce plugin.
9. Plug-in de curseur d'image jQuery "slideJS"
Le curseur jQuery élégant pourra certainement décorer votre projet.
10. Plugin de diaporama jQuery "Easy Slides" v1.1
Un plugin de diaporama jQuery facile à utiliser.
11. Plugin "jQuery Slides"
Plugin jQuery léger dans différentes conceptions. Le changement de diapositive automatique est fourni.
12. Galerie jQuery CSS avec transition automatique des diapositives
Si le visiteur ne clique pas sur les flèches avant ou arrière dans un certain délai, la galerie commencera à défiler automatiquement.
13. Curseur jQuery Nivo
Plugin léger de qualité très professionnelle avec un code valide. Il existe de nombreux effets de transition de diapositives différents.
14. Curseur mobile jQuery
Curseur frais. Curseur jQuery avec différents effets de transition d'image.
15. Plug-in jQuery Slider²
Curseur léger avec changement de lame automatique.
16. Nouveau curseur javascript
Curseur avec changement d'image automatique.
Plugin pour la mise en œuvre de diaporamas avec changement de diapositive automatique. Il est possible de contrôler l'affichage à l'aide de vignettes d'images.
Curseur d'image CSS jQuery utilisant le plugin NivoSlider.
19. Curseur jQuery "jShowOff"
Plugin de rotation de contenu. Trois possibilités d'utilisation : pas de navigation (avec changement automatique du format du diaporama), avec navigation par boutons, avec navigation par vignettes d'image.
20. Plugin de portefeuille d'effets d'obturateur
Nouveau plugin jQuery pour la conception de portfolio de photographe. La galerie a un effet intéressant de changement d'images. Les photos se succèdent avec un effet similaire au fonctionnement d'un obturateur d'objectif.
21. Curseur CSS javascript léger "TinySlider 2"
Implémentation du curseur d'image en utilisant javascript et CSS.
22. Curseur génial "Tinycircleslider"
Curseur rond élégant. La transition entre les images s'effectue en faisant glisser le curseur sous la forme d'un cercle rouge autour de la circonférence. Il s'intégrera parfaitement à votre site si vous utilisez des éléments ronds dans votre conception.
23. Curseur d'image jQuery
Kit curseur léger. Le curseur est présenté en différentes versions : verticale et horizontale. Différents types de navigation entre les images sont également mis en œuvre : à l'aide des boutons "Avant" et "Retour", à l'aide de la molette de la souris, à l'aide du clic de la souris sur la diapositive.
24. Galerie de vignettes du kit de curseur
Galerie de kits de curseurs. Les vignettes défilent à la fois verticalement et horizontalement. La transition entre les images s'effectue à l'aide : de la molette de la souris, du clic de la souris ou du survol d'une vignette.
25. Curseur de contenu jQuery "Kit de curseurs"
Curseur de contenu vertical et horizontal jQuery.
26. Diaporama du kit de curseur jQuery
Diaporama avec changement de diapositive automatique.
27. Curseur javascript CSS3 professionnel léger
Curseur jQuery et CSS3 soigné créé en 2011.
Diaporama de vignettes jQuery.
29. Diaporama jQuery simple
Diaporama avec boutons de navigation.
30. Super diaporama jQuery Skitter
Plugin jQuery "Skitter" pour créer des diaporamas incroyables. Le plugin prend en charge 22 (!) types d'effets d'animation différents lors du changement d'images. Il peut fonctionner avec deux options de navigation entre les diapositives : utiliser des numéros de diapositives et utiliser des vignettes. Assurez-vous de consulter la démo, une trouvaille de très haute qualité. Technologies utilisées : CSS, HTML, jQuery, PHP.
31. Diaporama maladroit
Diaporama fonctionnel. Les diapositives peuvent être : des images simples, des images avec des légendes, des images avec des info-bulles, des clips vidéo. Vous pouvez utiliser les flèches, les liens numérotés des diapositives et les touches droite/gauche de votre clavier pour naviguer. Le diaporama est réalisé en plusieurs versions : avec vignettes et sans vignettes. Pour voir toutes les options, suivez les liens Demo #1 - Demo #6 situés en haut de la page de démonstration.
Un design très original du curseur d'image, rappelant un ventilateur. Transition de diapositive animée. La navigation entre les images s'effectue à l'aide de flèches. Il existe également un changement automatique qui peut être activé et désactivé à l'aide du bouton Lecture / Pause situé sur le dessus.
Curseur jQuery animé. Les images d'arrière-plan sont automatiquement mises à l'échelle lorsque la fenêtre du navigateur est redimensionnée. Pour chaque image, un bloc avec une description apparaît.
34. Curseur "Flux Slider" sur jQuery et CSS3
Nouveau curseur jQuery. Plusieurs effets animés sympas lors du changement de diapositives.
35. Plug-in jQuery "jSwitch"
Galerie jQuery animée.
Diaporama jQuery facile avec changement de diapositive automatique.
37. Nouvelle version du plugin "SlideDeck 1.2.2"
Curseur de contenu professionnel. Il existe des options avec changement de diapositive automatique, ainsi qu'une option utilisant la molette de la souris pour se déplacer entre les diapositives.
38. Curseur jQuery Sudo
Curseur d'image jQuery léger. Il existe de nombreuses options de mise en œuvre: changement horizontal et vertical des images, avec des liens vers le numéro de diapositive et sans eux, avec et sans légendes d'image, divers effets de changement d'image. Il existe une fonction de changement de diapositive automatique. Des liens vers tous les exemples d'implémentation se trouvent sur la page de démonstration.
39. Diaporama jQuery CSS3
Le diaporama avec vignettes prend en charge le mode de transition automatique des diapositives.
40. Curseur de flux jQuery
Curseur avec de nombreux effets de changement d'image.
41. Curseur jQuery simple
Curseur d'image jQuery élégant.
Vous devez ajouter des boutons "avant" et "retour".
Pour ce faire, vous devez compléter le code écrit précédemment.
Code HTML pour le nouveau slider
La structure entière du curseur restera la même. Deux conteneurs seront ajoutés au balisage, qui agiront comme des boutons.
Styles de curseur
Les boutons prendront leur place grâce à un positionnement absolu par rapport au conteneur.slider-box
Slider-box( position : relative ; largeur : 320px ; hauteur : 210px ; overflow : caché ; ) .slider( position : relative ; largeur : 10000px ; hauteur : 210px ; ) .slider img( float : gauche ; ) .slider-box .prev , .slider-box .next( position : absolue ; haut : 100px ; affichage : bloc ; largeur : 29px ; hauteur : 29px ; curseur : pointeur ; ) .slider-box .prev( gauche : 10px ; arrière-plan : url ( ../images/slider_controls.png ) no-repeat 0 0 ; ) .slider-box .next( right : 10px ; background : url (../images/slider_controls.png ) no-repeat -29px 0 ; )
Scénario
Le curseur défile automatiquement. Par défaut, le mouvement va de gauche à droite, mais si nécessaire, vous pouvez changer le sens de son mouvement à l'aide de la variable course. Lorsque vous modifiez la valeur de la variable de 1 à -1, la direction du curseur change.
Les images d'un curseur ne doivent pas changer lorsque le curseur se trouve dans le curseur. Pourquoi est-ce? Tout est simple. Si le curseur de la souris se trouve sur le curseur, cela signifie que le visiteur du site est intéressé par son contenu. Pour le moment, ne changez pas automatiquement les diapositives.
$(fonction () ( var slider = $(".slider" ) , sliderContent = slider.html () , // Contenu du curseur slideWidth = $(".slider-box") .outerWidth() , // Largeur du curseur slideCount = $(".slider img") .length , // Nombre de diapositives prev = $(".slider-box .prev" ) , // Bouton retour next = $(".slider-box .next" ) , // Bouton Suivant sliderInterval = 3300 , // Intervalle pour changer de diapositive animateTime = 1000 , // Il est temps de changer de diapositive cours = 1 // Sens du mouvement du curseur (1 ou -1) marge = - slideWidth ; // Décalage initial des diapositives$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Une copie de la dernière diapositive est placée au début.$(".slider img" ) .eq (1 ) .clone () .appendTo ("".slider" ) ; // Une copie de la première diapositive est placée à la fin.$(".slider" ) .css ("margin-left" , - slideWidth) ; // Container.slider est décalé vers la gauche de la largeur d'une diapositive. fonction nextSlide() ( // Exécute la fonction animation() pour effectuer la transition de diapositive. interval = window.setInterval (animate, sliderInterval) ; ) function animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // Si le curseur a atteint la fin slider.css (( "marginLeft" :- slideWidth) ) ; // puis block.slider revient à sa position initiale margin=- slideWidth* 2 ; ) sinon si (marge== 0 && cours==- 1 ) ( // Si le curseur est au début et que le bouton de retour est enfoncé slider.css (( "marginLeft" :- slideWidth* slideCount) ) ; // puis block.slider se déplace vers la position finale margin=- slideWidth* slideCount+ slideWidth ; ) autre ( // Si les conditions ci-dessus échouent, margin = margin - slideWidth* (course) ; // la valeur de la marge est définie pour afficher la diapositive suivante) slider.animate (( "marginLeft" : margin) , animateTime) ; // Block.slider se déplace vers la gauche d'une diapositive.) fonction sliderStop() ( // Fonction pour arrêter le slider window.clearInterval(intervalle); )préc.clic(fonction())( // Bouton retour appuyé var cours2 = cours ; parcours = - 1 ; animer() ; // Appel de la fonction animate() cours = cours2 ; ) ) ; clic.suivant(fonction())( // Bouton retour appuyé if (slider.is ("":animated" ) ) ( return false ; ) // Si aucune animation ne se produit var cours2 = cours ; // Variable temporaire pour stocker la valeur bien sûr parcours = 1 ; // Définit la direction du curseur de droite à gauche animer() ; // Appel de la fonction animate() cours = cours2 ; // La variable course reprend sa valeur d'origine) ) ; slider.add(suivant) .add(prev) .hover(fonction())( // Si le curseur de la souris est dans le curseur sliderStop() ; // La fonction sliderStop() est appelée pour mettre le slider en pause) , diapositive suivante); // Lorsque le curseur quitte le curseur, l'animation reprend. diapositive suivante() ; // Appel de la fonction nextSlide() } ) ;Il s'est avéré qu'un tel curseur avec les boutons "avant" et "arrière"
La conception Web adaptative ou, si vous préférez, la conception Web réactive n'est plus seulement une autre tendance de conception, c'est déjà une sorte de norme de développement de sites Web qui garantit la polyvalence des sites Web, une perception visuelle harmonieuse sur les écrans des différents appareils utilisateur. Plus récemment, lors du développement d'un modèle adaptatif, j'ai dû faire face à diverses difficultés pour intégrer certains curseurs et galeries d'images sans violer le style de conception général. Maintenant, tout est beaucoup plus simple, il existe un grand nombre de solutions prêtes à l'emploi sur le réseau, et ce qui est particulièrement agréable, c'est que la plupart d'entre elles sont disponibles gratuitement, en open source.
En raison de la variété des outils proposés, j'ai compilé un bref aperçu des développements les plus notables des curseurs d'image jQuery réactifs qui sont apparus le plus récemment et sont distribués sans aucune restriction, c'est-à-dire. complétement gratuit.
Curseur WOW
Curseur d'image jQuery réactif avec un grand nombre d'effets visuels (rotations, flyouts, flous, spirales, stores, etc.) et de nombreux modèles prêts à l'emploi. Avec l'assistant d'intégration de page intégré de WOW Slider, vous pouvez facilement créer de superbes diaporamas en quelques minutes. Le site du développeur contient toute la documentation nécessaire à la configuration et à l'utilisation du plugin en russe, d'excellents exemples en direct du plugin. Un plugin Wordpress autonome et un module Joomla sont également disponibles en téléchargement. Je suis sûr que beaucoup de gens aimeront ce merveilleux curseur, à la fois pour les débutants et les webmasters avancés.
HiSlider
HiSlider - HTML5, curseur Jquery et galerie d'images, plugin absolument gratuit pour un usage personnel sur des sites exécutant des systèmes populaires - WordPress, Joomla, Drupal. Avec l'aide de cet outil simple mais assez fonctionnel, vous pouvez facilement créer des diaporamas étonnants et dynamiques, des présentations spectaculaires et des annonces de nouveaux messages sur les pages de vos sites. Plusieurs modèles et habillages prêts à l'emploi pour le curseur, des effets de transition (changement) de contenu étonnants, la sortie de divers contenus multimédias : vidéos de YouTube et Vimeo, paramètres utilisateur flexibles, etc...
Curseur Nivo
Nivo Slider - bon vieux, bien connu de tous dans le domaine, l'un des curseurs d'image les plus beaux et les plus faciles à utiliser. Le plugin jQuery Nivo Slider est téléchargeable et utilisable gratuitement sous la licence MIT. Il existe également un plugin séparé pour WordPress, mais malheureusement, il est déjà payé et vous devrez payer 29 $ pour une licence. Il est préférable de faire de la magie avec les fichiers de thème WP et de joindre la version jQuery gratuite du plugin Nivo Slider à votre blog, car il y a suffisamment d'informations sur le net pour le faire.
Quant à la fonctionnalité, tout est en ordre avec cela. Il utilise la bibliothèque jQuery v1.7+, de beaux effets de transition, des paramètres simples et très flexibles, une mise en page adaptative, un recadrage automatique des images et bien plus encore.
L'idée du slider a été inspirée par les développeurs, bien connus de tout le style de présentation des produits Apple, où plusieurs petits éléments (images) sont modifiés en cliquant sur la catégorie sélectionnée avec un simple effet d'animation. Codrops vous fournit un tutoriel détaillé sur la façon de créer ce curseur, une mise en page complète du balisage Html, un ensemble de règles CSS et un plugin jQuery exécutable, ainsi qu'un merveilleux exemple en direct d'utilisation du curseur.
Curseur Curseur
Curseur d'image plein écran dans jQuery et CSS3 + un tutoriel détaillé sur l'intégration du plugin dans les pages du site Web. L'idée est d'ouvrir la diapositive actuelle avec un contenu spécifique lors du passage au contenu suivant ou précédent. Avec les animations jQuery et CSS, vous pouvez créer des transitions uniques entre les diapositives. La disposition des curseurs réactifs garantit qu'elle s'affichera de la même manière sur les écrans de différents types d'appareils utilisateur.
Curseur de contenu élastique
Un curseur de contenu qui s'ajuste automatiquement en largeur et en hauteur en fonction de la taille du conteneur parent dans lequel il se trouve. Assez simple dans l'exécution et souple dans les réglages, le slider fonctionne sur JQuery, avec la navigation en bas, lorsque la taille de l'écran est modifiée vers le bas, la navigation s'affiche sous forme d'icônes. Documentation très détaillée (tutoriel de création) et exemples d'utilisation en direct.
Curseur de pile 3D
Une version expérimentale du curseur qui affiche des images avec des transitions à partir du plan 3D. Les images sont divisées en deux piles horizontales, à l'aide des flèches de navigation, le changement et la transition de chaque image suivante vers l'état de visualisation sont effectués. En général, rien de spécial, mais l'idée elle-même et la technique d'exécution sont assez intéressantes.
Curseur d'image jQuery très simple, 100% réactif et plein écran. Le travail du curseur est basé sur les transitions CSS (propriété de transition) en conjonction avec la magie jQuery. La largeur maximale est définie sur 100 % par défaut, de sorte que les images seront redimensionnées à mesure que la taille de l'écran change. Il n'y a pas d'effets d'animation spéciaux ni de fioritures dans la conception, tout est simple et affûté pour un fonctionnement fluide.
Diapositives minimales
Le nom dit tout, c'est probablement l'un des curseurs d'image jQuery les plus légers et les plus minimalistes que j'ai rencontrés (plugin 1kb). ResponsiveSlides.js- Un petit plugin jQuery qui crée un diaporama en utilisant des éléments à l'intérieur d'un conteneur. Fonctionne avec une large gamme de navigateurs, y compris toutes les versions d'IE, le célèbre frein de progression, à partir d'IE6. Le travail utilise des transitions CSS3 en conjonction avec javascript, pour plus de fiabilité. Balisage simple utilisant une liste non ordonnée, définition des transitions et des intervalles de temps, contrôle automatique et manuel des diapositives de commutation, ainsi que prise en charge de plusieurs diaporamas à la fois. Voici un "bébé" si fringant.
Caméra
Camera est un plugin de diaporama jQuery gratuit pour les pages de sites Web, un curseur léger avec de nombreux effets de transition, une mise en page 100% réactive et des paramètres très simples. Il s'adaptera parfaitement aux écrans de tous les appareils des utilisateurs (écrans PC, tablettes, smartphones et téléphones portables). Possibilité de démonstration de vidéo embarquée. Changement de diapositive automatique et contrôle manuel via des boutons et un bloc de vignettes d'images. Presque une galerie complète d'images dans un design compact.
bxSlider jQuery
Un autre curseur réactif jQuery assez simple. Les diapositives peuvent contenir n'importe quel contenu, vidéos, images, texte et autres éléments. Prise en charge étendue de l'écran tactile. Utilisation des transitions d'animation CSS. Un grand nombre de variantes différentes de présentation de diaporamas et de galeries d'images compactes. Commande automatique et manuelle. Changez de diapositive à l'aide des boutons et en sélectionnant les vignettes. Petite taille de fichier source, très facile à configurer et à mettre en œuvre.
Curseur flexible 2
FlexSlider 2 - Une version mise à jour du curseur éponyme, avec une réactivité améliorée, une minification des scripts et une minimisation de la redistribution/redessin. Le plugin comprend un curseur de base, des commandes de gestion des diapositives avec des vignettes, des flèches gauche-droite intégrées et une barre de navigation inférieure en forme de bouton. La possibilité d'afficher la vidéo dans des diapositives (vimeo), des paramètres flexibles (transitions, conception, intervalle de temps), une mise en page entièrement adaptative.
Galerie
Un plugin jQuery réactif bien connu et assez populaire pour créer des galeries d'images et des curseurs de haute qualité. L'interface du curseur, grâce à son panneau de contrôle, ressemble visuellement à un lecteur vidéo familier, le plugin comprend plusieurs thèmes différents. Prise en charge des vidéos et des images intégrées des services populaires : Flickr, Vimeo, YouTube et autres. Documentation détaillée sur la configuration et l'utilisation.
myrtille
Un curseur d'image jQuery simple et sans fioritures, écrit spécifiquement pour la conception Web réactive. Blueberry est un plugin jQuery expérimental open source. Design minimaliste, pas d'effets, seulement des images pop-up qui se remplacent après un certain temps. C'est très simple, installez, connectez et c'est parti...
jQuery popeye 2.1
Curseur d'image jQuery très compact avec des éléments Lightbox. Grâce à sa taille flexible, il est très facile à intégrer dans n'importe quel conteneur, dans un seul article sous forme de vignettes, lorsque vous survolez ou cliquez dessus, une lightbox avec une image plus grande et des commandes est activée. Il est pratique de placer un tel curseur dans les barres latérales pour présenter des produits ou des annonces de nouvelles. Une excellente solution pour les sites avec une grande quantité d'informations.
Séquence
Curseur réactif gratuit avec transitions CSS3 avancées. Style minimaliste, 3 thèmes, Chaque cadre glisse dans une direction horizontale, apparaissant au centre, l'image va vers la gauche, la légende vers la droite, les vignettes sont dupliquées dans le coin inférieur droit. Pagination des vues du produit à afficher dans chaque cadre. Les commandes comprennent également des boutons de retour et d'avance. Prise en charge de tous les navigateurs modernes.
Glisser
Un curseur d'image très simple à la fois en termes de fonctionnalités et de paramètres, à partir des paramètres, il y a un changement de la vitesse des diapositives, la connexion d'un mode manuel (les boutons de commande sont activés), un diaporama continu. Ce curseur a le droit d'être et il ne m'a attiré que par le fait qu'il existe, je n'ai rien trouvé de particulièrement intéressant dans ce développement pour moi, peut-être que je cherchais mal)))
Curseur d'image réactif
Un si beau curseur d'image adaptatif des camarades de Vladimir Kudinov. Un outil solide et bien conçu est fourni avec des exemples illustratifs et des instructions détaillées pour la création, l'installation et l'utilisation. Design réactif, boutons et flèches verts mignons, tout est plutôt agréable et calme, sans pression.
Curseur de fraction
Plugin de curseur jQuery gratuit avec effet de parallaxe pour les images et les diapositives de texte. Les animations de diapositives ont plusieurs valeurs d'affichage avec un contrôle total sur chaque paramètre de synchronisation et d'animation. La possibilité d'animer plusieurs éléments sur une diapositive à la fois. Vous pouvez définir différentes méthodes d'animation, des diapositives de fondu ou des transitions à partir d'une direction spécifique. Affichage automatique et contrôle manuel grâce aux flèches de navigation qui s'affichent au survol de l'image. 10 types d'effets d'animation de diaporama et plus encore...
L'examen s'est avéré assez approfondi, mais pas suffisamment informatif en raison du grand nombre de produits à l'étude. Vous pouvez trouver tous les détails et les descriptions détaillées des fonctionnalités d'un plugin particulier directement sur les pages des développeurs. Je ne peux qu'espérer qu'il a été plus facile pour quelqu'un de trouver le bon outil pour créer des curseurs d'images colorés sur les pages de leurs sites.
Avez-vous déjà pensé au fait qu'il serait agréable de pouvoir travailler avec des modèles russifiés ? Réfléchissez juste une minute. Ne perdez pas de temps à travailler avec des modèles en anglais. Nous nous empressons de vous faire plaisir avec le fait que vous pouvez maintenant trouver . Le texte de chacun d'eux a été écrit à la main. Et, bien sûr, toutes les solutions prêtes à l'emploi sont incroyablement faciles à utiliser.
Avec tout mon respect, André
