Un simple carrousel avec CSS. Le plugin carrousel jQuery le plus réussi
Actuellement, un slider - carrousel - est une fonctionnalité qu'il est simplement nécessaire d'avoir sur un site Web d'entreprise, un site Web de portfolio ou toute autre ressource. Outre les curseurs d'image plein écran, les curseurs de carrousel horizontaux s'intègrent bien dans n'importe quelle conception Web.
Parfois, le curseur doit occuper un tiers de la page du site. Ici, le curseur du carrousel est utilisé avec des effets de transition et des mises en page réactives. Les sites de commerce électronique utilisent un curseur carrousel pour afficher plusieurs photos dans des publications ou des pages individuelles. Le code du slider peut être librement utilisé et modifié selon vos besoins.
En utilisant JQuery en conjonction avec HTML5 et CSS3, vous pouvez rendre vos pages plus intéressantes, leur fournir des effets uniques et attirer l'attention des visiteurs sur une zone spécifique du site.
Slick – plugin de curseur de carrousel moderneSlick est un plugin jquery disponible gratuitement dont les développeurs affirment que leur solution satisfera toutes vos exigences en matière de slider. Curseur adaptatif - le carrousel peut fonctionner en mode « mosaïque » pour les appareils mobiles et en mode « glisser-déposer » pour la version de bureau.
Contient un effet de transition « fondu », une fonctionnalité intéressante de « mode central », un chargement paresseux des images avec défilement automatique. La fonctionnalité mise à jour inclut l'ajout de diapositives et d'un filtre de diapositives. Tout cela pour vous assurer que vous configurez le plugin en fonction de vos besoins.
Mode démo | Télécharger
Owl Carousel 2.0 – jQuery – plugin à utiliser sur les appareils tactilesCe plugin dispose d'un large éventail de fonctions, adaptées aussi bien aux développeurs débutants qu'expérimentés. Il s'agit d'une version mise à jour du curseur du carrousel. Son prédécesseur portait le même nom.
Le curseur dispose de plugins intégrés pour améliorer la fonctionnalité globale. Animation, lecture vidéo, lecture automatique du curseur, chargement paresseux, réglage automatique de la hauteur – telles sont les principales caractéristiques d'Owl Carousel 2.0.
La prise en charge du glisser-déposer est incluse pour une utilisation plus pratique du plugin sur les appareils mobiles.
Le plugin est parfait pour afficher de grandes images même sur les petits écrans des appareils mobiles.
Exemples | Télécharger
Un plugin jquery assez petit mais riche en fonctionnalités qui vous permet de placer un curseur sur une page - un carrousel, qui a un petit noyau et ne consomme pas beaucoup de ressources du site. Le plugin peut être utilisé pour afficher des curseurs verticaux et horizontaux, avec animation et créer des ensembles d'images à partir de la galerie.
Exemples | Télécharger
Curseur jQuery ultra compact - carrousel dont la fonctionnalité est bien supérieure à celle d'un curseur classique. Ceux-ci incluent un aperçu d'une seule image, un affichage carrousel de plusieurs images et un affichage par curseur basé sur le titre.
Exemples | Télécharger
Le carrousel Owl est un curseur qui prend en charge les écrans tactiles et la technologie glisser-déposer, facilement intégré au code HTML. Le plugin est l'un des meilleurs curseurs qui vous permettent de créer de magnifiques carrousels sans aucun balisage spécialement préparé.
Exemples | Télécharger
Utilise des transitions 3D basées sur des styles CSS et un peu de code Javascript.
Exemples | Télécharger
Magnifique carrousel 3D. Il semble qu'il s'agisse encore d'une version bêta, car j'ai découvert quelques problèmes tout à l'heure. Si vous souhaitez tester et créer vos propres sliders, ce carrousel vous sera d'une grande aide.
Exemples | Télécharger
Slider réactif - carrousel utilisant la technologie bootstrap uniquement pour votre nouveau site Web.
Exemples | Télécharger
Le plus populaire sur les sites Web de portefeuilles et d’entreprises. Ce type de slider - carrousel - se retrouve souvent sur des sites de tout type.
Exemples | Télécharger
Ce curseur de petite taille est prêt à fonctionner sur des appareils avec n'importe quelle résolution d'écran. Le curseur peut fonctionner en mode circulaire et carrousel. Le petit cercle est présenté comme une alternative aux autres curseurs de ce type. Il existe une prise en charge intégrée pour les systèmes d'exploitation IOS et Android.
En mode circulaire, le curseur semble assez intéressant. Excellent support de la méthode glisser-déposer et d'un système de défilement automatique des diapositives.
Exemples | Télécharger
Un curseur de carrousel puissant et adaptatif est parfait pour un site Web moderne. Fonctionne correctement sur n'importe quel appareil. Possède des modes horizontaux et verticaux. Sa taille est réduite à seulement 1 Ko. Le plugin ultra compact possède également d’excellentes transitions fluides.
Exemples | Télécharger
Contient plus de 50 effets, qui peuvent vous aider à créer un slider original pour votre site Web.
Exemples | Télécharger
Redimensionnez la fenêtre de votre navigateur pour voir comment le curseur s'adapte. Bxslider est livré avec plus de 50 options de personnalisation et présente ses fonctionnalités avec divers effets de transition.
Exemples | Télécharger
jCarousel est un plugin jQuery qui va vous aider à organiser la visualisation de vos images. Vous pouvez facilement créer des carrousels d'images personnalisés à partir de la base présentée dans l'exemple. Le curseur est adaptatif et optimisé pour travailler sur les plateformes mobiles.
Exemples | Télécharger
Scrollbox est un plugin compact pour créer un slider - un carrousel ou une exploration de texte. Les principales fonctionnalités incluent des effets de défilement vertical et horizontal avec pause au survol de la souris.
Exemples | Télécharger
Un simple curseur de carrousel. Si vous avez besoin d’un plugin rapide, celui-ci est 100% adapté. Livré avec uniquement les fonctionnalités de base requises pour que le curseur fonctionne.
Exemples | Télécharger
Les créateurs de Flexisel se sont inspirés du plugin jCarousel à l'ancienne, en en faisant une copie visant à assurer le bon fonctionnement du slider sur les appareils mobiles et tablettes.
La mise en page réactive de Flexisel, lorsqu'elle est exécutée sur des appareils mobiles, est différente d'une mise en page de la taille d'une fenêtre de navigateur. Flexisel est parfaitement adapté au travail sur écrans, aussi bien en basse qu'en haute résolution.
Exemples | Télécharger
Elastislide s'adapte parfaitement à la taille de l'écran de votre appareil. Vous pouvez définir le nombre minimum d'images à afficher à une résolution spécifique. Fonctionne bien comme curseur de carrousel pour les galeries d'images, en utilisant un wrapper fixe avec un effet de défilement vertical.
Exemple | Télécharger
Curseur gratuit de Woothemes. Il est à juste titre considéré comme l'un des meilleurs curseurs adaptatifs. Le plugin contient plusieurs modèles et sera utile aussi bien aux utilisateurs novices qu'aux experts.
Exemple | Télécharger
Amazing Carousel – curseur d’image réactif utilisant jQuery. Prend en charge de nombreux systèmes de gestion de contenu tels que WordPress, Drupal et Joomla. Prend également en charge les systèmes d'exploitation Android, IOS et de bureau sans aucun problème de compatibilité. De superbes modèles de carrousel intégrés vous permettent d'utiliser le curseur en modes vertical, horizontal et circulaire.
Un jour, mes amis ont décidé de me faire une agréable surprise. La surprise en elle-même était très simple : elle nécessitait un T-shirt très ordinaire, sans aucun motif.
Et puis ils ont rencontré un problème : tous les T-shirts dans les magasins portaient des images. Ils ne pouvaient pas trouver le T-shirt le plus simple sans images. Je pense que vous avez rencontré un problème similaire lorsque vous ne trouvez pas la chose la plus simple.
Et c’est la même histoire avec les carrousels ; presque tous les carrousels ont déjà un design. Et vous avez presque toujours besoin d’un carrousel propre, que vous pouvez ensuite concevoir comme le concepteur l’a prévu.
Par conséquent, afin de profiter immédiatement du travail avec les carrousels, et de les réaliser rapidement, je vous suggère d'utiliser le plugin suivant.
Plugin jQuery pour un carrousel propre et puissantCe qui est cool avec ce plugin, c'est qu'il n'a pas de design et qu'il est beaucoup plus facile à utiliser que d'autres beaux plugins.
Il peut être décoré comme vous le souhaitez.
Et donc, voici ce plugin : Owl Carousel.
Installation du plug-in1. Connectez jQuery s'il n'est pas déjà connecté, par exemple comme ceci
2. Copiez les fichiers du plugin dans le dossier du site
- Déballage
- Copiez le dossier hibou-carrousel sur le site
3. Connectez ces fichiers au site :
4. Ajoutez du code à la page
1 2 3 4 5 6 7 8 9 10 11 12 13 14
5. Lancez le plug-in
$(document).ready(function())( // Trouver le bloc carrousel var carousel = $("#carousel"); // Lancer le plugin carrousel carousel.owlCarousel(); ));
6. Nous organisons
/* Bloc principal */ .owl-wrapper-outer ( bordure : 1px solide #777 ; border-radius : 5px ; débordement : caché ; arrière-plan : blanc ; ) /* 1 carré de carrousel */ .carousel-element ( padding : 30px ; alignement du texte : centre ; taille de la police : 300 % ; bordure droite : 1px solide #777 ;
Boutons Précédent et SuivantDans cet exemple, je ne montrerai pas la méthode la plus rapide, mais la plus universelle.
1. Ajoutez les boutons eux-mêmes
Précédent Suivant
2. Attacher des boutons au plugin carrousel
Après avoir lancé le plugin, ajoutez le code
// Retour // Lorsque vous cliquez sur "Retour" $("#js-prev").click(function () ( // Commencer le rembobinage à gauche carousel.trigger("owl.prev"); return false; )); // Suivant // Lorsque vous cliquez sur "Forward" $("#js-next").click(function () ( // Commencez à rembobiner vers la droite carousel.trigger("owl.next"); return false; ) );
Désormais, lorsque vous cliquez sur « Précédent » et « Suivant », le rembobinage sera déclenché.
MarqueursCe sont ces points qui montrent où nous en sommes actuellement.
Ceux-ci peuvent être activés lors de l'exécution du plugin en ajoutant le paramètre suivant
// Lance le plugin carrousel carousel.owlCarousel(( // Points sous la pagination du carrousel : true ));
/* Bloc avec des points */ .owl-pagination ( text-align: center; /* Aligner les points au milieu */ ) /* 1 Point */ .owl-page ( width: 10px; height: 10px; border: 1px solide #777 ; affichage : bloc en ligne ; arrière-plan : blanc ; rayon de bordure : 5px) /* Point actif */ .owl-page.active ( arrière-plan : #777 ; )
Pour afficher seulement 1 blocCeci est assez souvent nécessaire, pour cela nous ajoutons le paramètre suivant
// Lance le plugin carrousel carousel.owlCarousel(( singleItem: true, // Afficher seulement 1 bloc en pleine largeur ));
Différents nombres de blocs sur différents appareilsUne fonctionnalité très utile qui vous permet de créer un carrousel adaptatif pour les appareils mobiles.
// Lancer le plugin carrousel carousel.owlCarousel(( // Nombre de blocs affichés // selon l'appareil (largeur d'écran) // Nombre de blocs sur les éléments grands écrans : 10, // 5 blocs sur les ordinateurs (écran de 1400px à 901px) itemsDesktop : , // 3 blocs sur les petits ordinateurs (écran de 900px à 601px) itemsDesktopSmall: , // 2 éléments sur les tablettes (écran de 600 à 480 pixels) itemsTablet: , // Les paramètres du téléphone sont désactivés, dans ce cas ils sera // utilisé les paramètres de la tablette itemsMobile: false ));
De quel genre de surprise s'agit-il ?Des amis viennent à ma fête d'anniversaire, ils sourient joyeusement, la joie déborde. Ils m'offrent solennellement un cadeau.
Je l'ouvre et regarde le T-shirt. Je le déplie. Bon sang, quelle bêtise. Je vois 3 photos de moi sur ce T-shirt. J'ai enfilé un T-shirt et tout le monde s'est mis à rire, ça s'est avéré stupide et drôle.
Lorsque j'ai commencé à étudier ce sujet, je n'avais pas besoin d'un carrousel 3D, mais j'étais plus intéressé par les détails techniques de sa mise en œuvre. Bien entendu, les principales techniques utilisées sont bien sûr le module CSS Transforms niveau 1, mais un groupe d'autres technologies de développement front-end seront également appliquées, abordant divers sujets en CSS, Sass et JavaScript côté client.
DémoPour illustrer la configuration des transformations CSS 3D, je vais vous montrer une version CSS uniquement du composant. Ensuite, je vais vous montrer comment l'améliorer avec JavaScript en développant un simple script de composant.
Balisage pour un carrousel avec huit imagesPour la mise en page, les images à l'intérieur du composant sont enveloppées dans un élément qui fournit le squelette de base :
Ce sera notre fondation.
Structure de carrousel géométriqueAvant d’aborder le CSS, regardons le schéma qui sera développé dans les sections suivantes.
Ces les éléments doivent être disposés dans un cercle délimité par le carrousel. Ce cercle peut être approximé par son polygone régulier délimité et les images qui l'entourent :
Ainsi, le nombre de côtés d'un tel polygone coïncide avec le nombre d'images dans le carrousel :
Avec trois images, le polygone est un triangle équilatéral ;
Avec quatre images, c'est un carré ;
Avec cinq pentagones ; et ainsi de suite:
Le polygone ne peut pas être défini et la procédure suivante ne peut pas être appliquée telle quelle. Quoi qu’il en soit, le cas d’une seule image est plutôt inutile ; Les deux images sont un peu plus probables et auraient pu être placées sur deux points diamétralement opposés du cercle. Par souci de simplicité, ces cas particuliers ne sont pas traités et un minimum de trois images est supposé. Cependant, les modifications relatives du code ne seraient pas difficiles.
Ce polygone imaginaire de référence sera situé dans l'espace tridimensionnel perpendiculaire au plan de la fenêtre, et son centre sera repoussé dans l'écran à une distance égale à son apothème, la distance d'un côté du polygone à son centre, comme le montre la figure 1. Voici une vue de haut en bas du carrousel :
Ainsi, le côté qui fait actuellement face au spectateur sera sur le plan de l'écran à z = 0, et l'image frontale, non affectée par la perspective de raccourci, sera à sa taille 2D normale. d La lettre dans l'image représente la valeur de la propriété perspective CSS.
Construire une géométrie de carrouselDans cette section, je vais vous montrer les règles CSS clés que je vais parcourir étape par étape.
Les extraits de code suivants utilisent certaines variables Sass pour rendre le composant plus personnalisable. J'utiliserai $n pour indiquer le nombre d'images dans le carrousel et $item-width pour indiquer la largeur de l'image.
L'élément est une fenêtre contenant la première image et un élément de référence autour duquel d'autres images seront positionnées et transformées.
En supposant pour l'instant que le carrousel n'avait qu'une seule image à afficher, je peux commencer par le dimensionnement et l'alignement :
Carrousel ( display: flex; flex-direction: column; align-items: center; > * ( flex: 0 0 auto; ) .figure ( width: $item-width; transform-style: préservation-3d; img ( width: 100%; &:not(:first-of-type) ( display: none /* Juste pour l'instant */ ) ) ) )
L'élément a une largeur donnée de l'élément du carrousel, et il a la même hauteur que les images (elles peuvent être de tailles différentes, mais elles doivent avoir le même rapport hauteur/largeur). De cette façon, la hauteur du conteneur carrousel s'adapte à la hauteur de l'image. De plus, il est centré horizontalement dans le conteneur carrousel.
La première image ne nécessite aucune transformation supplémentaire car elle se trouve déjà dans sa position cible, qui est la face avant du carrousel.
Le carrousel peut pivoter dans l'espace 3D en appliquant une transformation de rotation à l'élément. Cette rotation doit se faire autour du centre du polygone, je vais donc changer l'origine originale de la transformation :
Figure du carrousel ( transformation-origine : 50 % 50 % ($apothem); )
Cette valeur est annulée car en CSS, la direction positive de l'axe z est hors écran, vers le spectateur. Les parenthèses sont nécessaires pour éviter les erreurs de syntaxe Sass. Le calcul du polygone de l'apothème sera expliqué plus loin.
En traduisant le référentiel de l'élément, l'ensemble du carrousel peut pivoter avec une rotation sur le (nouvel) axe y :
Figure du carrousel ( transform: rotateY(/* un certain montant ici */rad); )
Je reviendrai sur les détails de cette tournure plus tard.
Passons aux transformations pour d'autres images. Avec un positionnement absolu, les images sont repliées vers l'intérieur :
Figure du carrousel img:not(:first-of-type) ( position : absolue ; gauche : 0 ; haut : 0 ; )
Ces valeurs de z-index sont ignorées car elles ne constituent qu'une étape préliminaire aux transformations suivantes. En fait, chaque image peut désormais pivoter le long de l'axe y du carrousel d'un angle de rotation qui dépend du côté du polygone sur lequel l'image est attribuée. Tout d'abord, comme c'est le cas avec l'élément, il modifie l'origine de l'image par défaut en la déplaçant au centre du polygone :
Img:not(:first-of-type) ( transform-origin: 50% 50% ($apothem); )
Les images peuvent ensuite pivoter sur leur nouvel axe y d'une quantité donnée par ($i - 1) * $theta radians, où $i est l'index (en commençant par un) de l'image et $theta = 2 * $PI / $n, $PI représentant la constante mathématique pi. Par conséquent, la deuxième image subira une rotation $theta de la troisième 2 * $theta , et ainsi de suite, jusqu'à ce que la dernière image à faire pivoter ($n - 1) * $theta .
Ce positionnement relatif des images sera préservé lors des rotations du carrousel (c'est-à-dire les rotations autour de l'axe y modifié) en raison de la nature hiérarchique des transformations CSS imbriquées.
Cette quantité de rotation de chaque image peut être attribuée à l'aide de la directive de contrôle @for Sass :
Figure du carrousel img ( @for $i de 2 à $n ( &:nth-child(#($i)) ( transform: rotateY(#(($i - 1) * $theta)rad); ) ) )
Cela utilise la construction for...through plutôt que for...to car au lieu de for...to la dernière valeur attribuée à la variable d'index $i sera n-1 au lieu de n .
Notez deux exemples de syntaxe d'interpolation #() Sass. Dans le premier cas, il est utilisé pour le sélecteur index:nth-child() ;
Dans le second cas, il est utilisé pour définir la valeur de la propriété de rotation.
Le calcul de l'apothème d'un polygone dépend du nombre de côtés et de la largeur du côté, c'est-à-dire des variables $n et $item-width.
Formule:
$largeur de l'image / (2 * tan($PI/$n))
Où tan() est la fonction trigonométrique tangente.
Cette formule peut être dérivée avec un peu de géométrie et de trigonométrie. Dans la source du stylet, cette formule n'est pas implémentée telle qu'elle est écrite car la fonction tangente n'est pas disponible dans Sass, donc une valeur solide est utilisée à la place. La formule sera entièrement implémentée dans la démo JavaScript.
Espacement entre les éléments du carrouselÀ ce stade, les images du carrousel sont « cousues » côte à côte pour former la forme polygonale souhaitée. Mais ici, ils sont très serrés et, souvent, dans les carrousels 3D, il y a un espace entre eux. Cette distance améliore la perception de l'espace 3D car elle permet de voir les images inversées au dos du carrousel.
Vous pouvez ajouter davantage cet espacement entre les images en introduisant une autre variable de configuration $item-separation et en l'utilisant comme espaceur horizontal pour chaque image. élément. Plus précisément, en prenant la moitié de cette valeur pour le remplissage gauche et droit :
Figure du carrousel img ( padding: 0 $item-separation / 2; )
Les images ont été rendues semi-transparentes avec une propriété d'opacité pour mieux illustrer la structure du carrousel, et une disposition flexible sur l'élément racine du carrousel a été utilisée pour le centrer verticalement dans la fenêtre.
Carrousel rotatifPour faciliter le test de la rotation du carrousel, je vais ajouter un contrôle d'interface utilisateur pour naviguer entre les images. Voir la démo CodePen pour HTML, CSS et JavaScript implémentant ce contrôle ; Ici, je décrirai uniquement le code lié à la rotation.
Nous utilisons currImage une variable entière indiquant quelle image se trouve à l'avant du carrousel. Lorsque l'utilisateur interagit avec les boutons précédent/suivant, cette variable est incrémentée ou décrémentée de un.
Après avoir mis à jour currImage , la rotation du carrousel se fait avec :
Figure.style.transform = `rotateY($(currImage * -theta)rad)`;
(Ici et dans les extraits suivants, les littéraux du modèle ES6 sont utilisés pour interpoler des expressions dans des chaînes, n'hésitez pas à utiliser l'opérateur de concaténation traditionnel "+" si vous préférez)
Où thêta est le même qu’avant :
NumImages = figure.childElementCount; thêta = 2 * Math.PI/numImages ;
La rotation se produit -thêta en raison du fait que le passage à l'élément suivant nécessite une rotation dans le sens inverse des aiguilles d'une montre, et ces valeurs de rotation sont négatives dans les transformations CSS.
Notez que cette valeur currImage n’est pas limitée à une plage, mais peut croître indéfiniment, dans les directions positive et négative. En fait, si l'image sur la face avant est la dernière (donc currImage==n-1) et que l'utilisateur appuie sur le bouton suivant, si on remet currImage à 0 pour aller à la première image du carrousel, il y aura un angle de rotation de transition de (n-1) *thêta à 0 et cela fera tourner le carrousel dans le sens opposé de toutes les images précédentes. Un problème similaire peut survenir lorsque vous appuyez sur le bouton Précédent lorsque la première image est la première.
Pour être pointilleux, je dois même vérifier les débordements potentiels de currentImage car le type de données Number ne peut pas prendre des valeurs arbitrairement grandes. Ces vérifications ne sont pas implémentées dans le code de démonstration.
Après avoir vu le CSS de base derrière le carrousel, JavaScript peut désormais être utilisé pour améliorer le composant de plusieurs manières, telles que :
- N'importe quel nombre d'images
- Images avec une largeur en pourcentage
- Plusieurs instances de carrousel par page
- Configurations par instance telles que la taille de l'espace et la visibilité arrière
- Configuration à l'aide des attributs de données HTML5*
Tout d'abord, je supprime les variables et les règles liées aux origines et aux rotations de transformation de la feuille de style, car cela sera fait en utilisant JavaScript :
$largeur de l'article : 40 % ; // Nous pouvons maintenant utiliser des pourcentages $item-separation: 0px; // Ceci est maintenant défini avec Js $viewer-distance: 500px; .carousel ( remplissage : 20px ; perspective : $viewer-distance ; débordement : caché ; affichage : flex ; flex-direction : colonne ; align-items : center ; > * ( flex : 0 0 auto ; ) figure ( margin : 0 ; width: $item-width; transform-style:preserve-3d;transition:transform 0.5s;img (largeur: 100%;box-sizing: border-box; padding: 0 $item-separation / 2; &:not( :premier-de-type) ( position : absolue ; gauche : 0 ; haut : 0 ; ) ) ) )
Fonction carrousel(root) ( // à venir... )
L'argument racine fait référence à l'élément DOM qui contient le carrousel.
Normalement, cette fonction serait un constructeur pour générer un objet pour chaque carrousel de la page, mais je n'écris pas de bibliothèque de carrousel ici, donc une simple fonction suffira.
Pour créer plusieurs composants sur la même page, le code attend que toutes les images soient chargées en enregistrant un écouteur sur l'objet window pour l'événement de chargement, puis appelle carousel() sur chaque élément avec la classe carousel :
Window.addEventListener("load", () => ( var carousels = document.querySelectorAll(".carousel"); for (var i = 0; i< carousels.length; i++) { carousel(carousels[i]); } });
carousel() Effectue trois tâches principales :
- Paramètres de navigation.
- Mise en place des transformations
- Enregistrez un écouteur de redimensionnement de fenêtre pour conserver les commentaires du carrousel tout en l'adaptant à la nouvelle taille de la fenêtre d'affichage.
Avant d'examiner le code de configuration de la conversion, j'examinerai quelques variables clés et comment elles sont initialisées en fonction de la configuration de l'instance :
Var figure = root.querySelector("figure"), images = figure.children, n = images.length, gap = root.dataset.gap || 0, bfc = "bfc" dans root.dataset ;
Le nombre d'images (n) est initialisé en fonction du nombre d'enfants de l'élément. L'espace entre les diapositives, initialisé à partir de l'attribut HTML5 data-gap, s'il est défini. L'indicateur de visibilité arrière (bfc) est lu à l'aide de l'API de l'ensemble de données HTML5. Ceci sera utilisé plus tard pour déterminer si les images au dos du carrousel doivent être visibles ou non.
Configuration des transformations CSSLe code qui définit les propriétés liées aux transformations CSS est encapsulé dans setupCarousel(). Cette fonction imbriquée prend deux arguments. Le premier est le nombre d’éléments dans le carrousel, c’est-à-dire la variable introduite ci-dessus. Le deuxième paramètre s est la longueur du côté du polygone du carrousel. Comme je l'ai mentionné plus tôt, cela est égal à la largeur des images, vous pouvez donc lire la largeur actuelle de l'une d'elles avec getComputedStyle() :
SetupCarousel(n, parseFloat(getComputedStyle(images).width));
De cette façon, la largeur de l'image peut être définie à l'aide de valeurs en pourcentage.
Window.addEventListener("resize", () => ( setupCarousel(n, parseFloat(getComputedStyle(images).width)); ));
Par souci de simplicité, je ne comprends pas le redimensionnement de l'écouteur.
La première chose que setupCarousel() doit faire est de calculer l'apothème du polygone en utilisant les paramètres transmis et la formule discutée précédemment :
Apothème = s / (2 * Math.tan(Math.PI / n));
Cette valeur est ensuite utilisée pour modifier le début de la transformation de l'élément de forme afin de produire le nouvel axe de rotation du carrousel :
Figure.style.transformOrigin = `50% 50% $(-apothem)px`;
Ensuite, les styles sont appliqués aux images :
Pour (var je = 0; je< n; i++) { images[i].style.padding = `${gap}px`; } for (i = 1; i < n; i++) { images[i].style.transformOrigin = `50% 50% ${- apothem}px`; images[i].style.transform = `rotateY(${i * theta}rad)`; } if (bfc) { for (i = 0; i < n; i++) { images[i].style.backfaceVisibility = "hidden"; } }
La première boucle attribue de l'espace à l'espace entre les éléments du carrousel. La deuxième boucle met en place les transformations 3D. La dernière boucle traite les bords arrière si l'indicateur correspondant a été spécifié dans la configuration du carrousel.
Enfin, rotateCarousel() est appelé pour amener l’image actuelle au premier plan. Il s'agit d'une petite fonction d'assistance qui, compte tenu de l'index de l'image affichée, fait pivoter l'élément de forme le long de l'axe Y pour faire avancer l'image cible. Il est également utilisé par le code de navigation pour naviguer d'avant en arrière :
Fonction rotateCarousel(imageIndex) ( figure.style.transform = `rotateY($(imageIndex * -theta)rad)`; )
Voici le résultat final, une démo qui crée plusieurs carrousels, chacun avec une configuration différente.
/* C'est ici que commence notre carrousel. Block.carousel-wrapper est positionné de manière relative, wrapper.carousel-item est positionné de manière absolue. . */ .carousel-wrapper( position:relative; /* Les boîtes positionnées de manière absolue obtiennent leur hauteur et leur largeur de leur parent. Nous les avons rendues transparentes par défaut, puis elles apparaîtront en douceur lorsque vous cliquerez sur links.arrow-prev et.arrow- suivant. * / .carousel-item( position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0; transition:all0.5sease-in-out; /* Remarqué le remplissage à gauche et à droite de 50px ? De cette façon nous pouvons positionner nos liens ! Chacun aura une largeur de 50px De plus, j'utilise des liens vides avec une image de fond pour que les liens ressemblent à des flèches. URL des liens vers l'URL d'origine. les liens n'étaient pas que des rectangles transparents. */ .arrow( position:absolute; top:0; display:block; width:50px; height:100%; -webkit-tap-highlight. -color:rgba(0,0,0, 0); background:url("/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Renvoyons notre flèche vers la gauche */ & .arrow-prev( left:0; ) /* Et la seconde est à droite Comme j'utilise la même image pour la flèche, je la fais pivoter de 180 degrés. */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) /* J'aime vraiment l'apparence des diapositives du carrousel sur un fond sombre, et si block.carousel -item a la classe "light", nous allons changer son texte en blanc et utiliser des flèches blanches au lieu de flèches grises. Vérifiez à nouveau que le chemin d'accès à l'image de la flèche est correct */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Écrivons une requête multimédia pour modifier la taille des flèches sur les appareils avec des tailles d'écran plus petites.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background -position:10px50% ; ) ) ) /* Définit les cibles des liens pour qu'elles s'affichent : aucune ; De cette façon, nous nous débarrassons du navigateur qui saute constamment tout en haut du carrousel à chaque fois que nous cliquons sur les flèches. Cette propriété est efficace pour tous les éléments dont l'ID commence par "target-item". */ ( display:none; ) /* Ci-dessus, nous avons rendu toutes les diapositives de notre carrousel transparentes, ce qui signifie que lorsque le carrousel se chargera, nous obtiendrons une grande boîte vide à la place. Modifions la valeur de transparence de la première diapositive sur 1 pour l'affichage. Nous définissons également le z-index sur 2, en le plaçant au-dessus du reste des diapositives. */ .item-1( z-index:2; opacity:1; ) /* Mais nous ne voulons pas que la première diapositive ait toujours une valeur d'opacité de opacity: 1; sinon, nous devrons parcourir cette diapositive tout en faisant pivoter les autres. */ *:target~.item-1( opacity:0; ) /* ..mais si #target-item-1 est au point et que nous voulons afficher la première diapositive, sélectionnez-la à l'aide de l'icône ~ et définissez le l'opacité à nouveau à 1 :-) */ #target-item-1:target~.item-1( opacity:1; ) /* Si d'autres éléments cibles # sont au point, sélectionnez-les à l'aide du sélecteur ~, affichez-les en douceur et placez-les dessus à l'aide de z-index : 3. Ici, vous pouvez ajouter des étendues supplémentaires avec l'identifiant de l'élément cible si vous en avez plus de trois. Peut ajouter 10 pièces à la fois. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )
1. Carrousel jQuery « clickCarousel »
Bloquer avec les annonces d'actualités défilantes. Utilisez les flèches gauche/droite pour faire défiler les blocs. L'archive contient un carrousel dans deux styles : clair et sombre.
1. carrousel jQuery, plugin « carouFredSel »
Un carrousel d'images soigné et frais dans jQuery.
4. Plugin jQuery : carrousel « Elastislide »
Excellents curseurs de contenu sous la forme d'un carrousel d'images utilisant jQuery. La page de démonstration décrit comment attacher ce carrousel à votre site.
Plugin Slider Kit, un carrousel léger avec diverses options de défilement.
7. carrousel javascript
Navigation originale entre les vignettes d'images. Pour voir l'effet sur le côté droit de la page de démonstration, cliquez sur les boutons Haut et Bas. Cette solution jQuery propose également un effet de survol sur la vignette et un défilement avec la molette de la souris.
9. Carrousel facile 10. Carrousel réalisé à partir de blocs « Easy Paginate »
Plugin jQuery "Easy Paginate". Chaque bloc rectangulaire représente un élément de liste régulier, et s'il y a plus de trois éléments, alors pour les afficher tous, vous devez utiliser une navigation de type curseur (en utilisant les flèches « avant », « retour » et en utilisant les boutons de navigation en haut. bas).
11. Rotateur de téléscripteur vertical
Rotateur vertical sur jQuery : défilement automatique du contenu sur la page. Des boutons de navigation sont fournis, ainsi que la possibilité d'arrêter la rotation et de la relancer. Lorsque vous passez le curseur de la souris, le mouvement s'arrête. Au niveau du balisage HTML, les blocs de défilement sont représentés par des éléments de liste li ordinaires.
12. Zone de défilement CSS javascript
solution javascript "TinyScroller" pour créer une zone de défilement placée dans un conteneur DIV.
13. Plugin jQuery « Smooth Div Scroll »
Plugin pour implémenter le défilement horizontal du contenu dans une zone spécifique. Lorsque vous passez la souris sur le bord gauche ou droit de la zone, le défilement commence.
La navigation entre les diapositives de contenu peut se faire à l'aide de flèches ou en cliquant sur la vignette. En bas se trouve un bouton « Afficher » qui vous permet de masquer/afficher les vignettes ou une description complète de la diapositive.
15. Rotateur de contenu « Carrousel de contenu circulaire »
Un bloc avec un scroller qui apparaît lorsque vous passez le curseur. Vous pouvez faire défiler le contenu à l'aide de la barre de défilement ou de la molette de la souris.
Cette solution jQuery a été inspirée par un effet similaire sur le site Apple. Les développeurs de cette société ont toujours trouvé des solutions intéressantes qui ont inspiré les webmasters du monde entier. Pour démontrer le plugin, sélectionnez une catégorie dans la liste.
19. Curseur génial
Le curseur est généré automatiquement. Les données avec le nom du produit, la description, le lien et l'adresse de l'image sont extraites du fichier slider.db.txt. Technologies utilisées : CSS, PHP, jQuery.
20. Rotation des blocs à l'aide de jQuery
Pour visualiser l'effet de rotation des blocs, cliquez sur l'un des petits rectangles de la page de démonstration
Un plugin de défilement de contenu, par exemple, peut être utilisé pour afficher les dernières nouvelles ou pour afficher des dépliants Twitter sur un site Web.
22. Bloc dynamique « Avis clients »
Rotation automatique du contenu du bloc. Technologies utilisées : PHP, XML, CSS, jQuery.
Ce plugin convertit les éléments de liste (ul li) en éléments de carrousel jQuery.
26. carrousel javascript « ImageFlow »
Il est facile de faire défiler les images à l'aide de la molette de la souris.
27. Défilement du contenu
Un bloc compact avec une annonce des derniers matériels du site ou des actualités. La colonne de gauche affiche une liste paginée de courtes annonces des dernières nouvelles. Lorsque vous en sélectionnez un, une description plus détaillée et un lien pour lire le texte intégral de la publication s'affichent dans la colonne de droite. Implémenté en utilisant jQuery.
Les images avec des liens défilent, lorsque vous passez la souris, le défilement s'arrête et la barre de navigation apparaît. Lorsque vous passez la souris sur une image, son nom s'affiche également entre les boutons de commande. C'est très joli sur la page
33. Contenu défilant, plugin Mootools « Scrollbar »
Le défilement s'effectue à l'aide de la barre de défilement et de la molette de la souris.