Carrousel CSS et Javascript Ant

Avec l'avènement de CSS3, il est devenu possible de faire des animations sans utiliser les bibliothèques JS, comme par exemple jQuery. La propriété de transition CSS3 vous permet de modifier en douceur d'autres propriétés d'un élément (largeur, hauteur, marge, opacité, etc.), en définissant le temps et la loi de transformation comme paramètres. Je propose un petit carrousel, mais tout à fait fonctionnel, en pur Javascript. Petite comme une fourmi, beaucoup plus petite qu'une chouette . Mais avec presque les mêmes capacités.

Ant-carrousel vous permet de:

• montrer un ou plusieurs éléments;
• les éléments peuvent être représentés sous la forme d'un ruban fini ou infini (en boucle);
• éléments à défilement automatique;
• la navigation s'effectue par flèches, points indicateurs ou retournement (pour les écrans tactiles);
• s'adapte automatiquement à n'importe quelle largeur d'écran.

Nous mettons notre carrousel dans le fichier index.html (voir l'exemple de fichier ci-dessous):


Les éléments <ul> <li> sont utilisés ici, mais <div> <div> peut être utilisé à la place, si vous préférez. Les flèches et les points indicateurs sont positionnés de manière absolue dans les conteneurs respectifs. Pour les flèches, des motifs sous forme de crochets triangulaires sont utilisés, que vous pouvez, si vous le souhaitez, remplacer par vos motifs ou la génération d'image par les pseudo-éléments : avant et : après .

Créez un carrousel avec trois éléments visibles et une largeur d'élément de 270 pixels. La largeur maximale du carrousel est alors de 810 pixels. Nous incluons le fichier CSS:


Nous plaçons les éléments dans le conteneur ant-carrousel-list , définissons la propriété display: flex et pressons tous les éléments sur le bord gauche de justification-content: flex-start . La propriété flex: 0 0 définit automatiquement flex-shrink sur 0 (la valeur par défaut est 1). Le défilement des éléments du carrousel est effectué à l'aide de la propriété transiton en modifiant en douceur le retrait de marge gauche de zéro à la largeur de l'élément (dans un sens) ou de la largeur de l'élément à zéro (dans l'autre sens). Pour la fonction de transformation (défilement), la valeur de facilité est utilisée .

Nous passons au programme. Dans les options du programme, vous pouvez configurer:

• nombre d'éléments visibles;
• visualisation des éléments sous la forme d'une bande du premier au dernier ou en boucle infinie (la bande se ferme en anneau);
• défilement automatique ou manuel des éléments;
• intervalle de défilement automatique;
• vitesse d'animation;
• activer / désactiver les éléments de navigation: flèches, points indicateurs, retournement tactile (pour les écrans tactiles).

L'initialisation du programme commence par le fait que le nombre d'éléments de carrousel est déterminé, les valeurs initiales sont affectées aux variables internes, les gestionnaires d'événements sont affectés aux flèches et aux points (s'ils sont connectés). Si l'option de défilement automatique est activée, des gestionnaires supplémentaires sont attribués qui arrêtent le défilement lorsque vous passez la souris sur les éléments du carrousel. Le défilement tactile est déclenché s'il y a plus de 20 pixels entre le point où le doigt touche l'écran et le point où le doigt est arraché de l'écran et la durée totale pendant laquelle le doigt touche l'écran est inférieure à 80 ms. L'auteur n'a pas encore beaucoup d'expérience avec ce carrousel, par conséquent, les valeurs données peuvent nécessiter des éclaircissements. Pour un fonctionnement plus fiable du gestionnaire de défilement, la distance entre les points peut être réduite à 10 ou 15 pixels et le temps de contact doit être augmenté à 100 ou 120 ms. L'utilisateur de ce carrousel peut corriger lui-même ces valeurs après avoir acquis une certaine expérience dans son utilisation.

L'algorithme de défilement des éléments diffère selon que l'option de boucle est activée ou non. Si elle est activée, lors du défilement vers la droite (fonction elemPrev ), la propriété margin-left de la ligne entière de ces éléments this.crslList diminue de zéro à une valeur négative égale à la largeur de l'élément elemWidth . Dans le même temps, le dernier élément à droite est cloné et inséré avant le premier élément, après quoi le dernier élément est supprimé. La ligne se voit attribuer la propriété 'transition: margin' + options.speed + 'ms easise' , où options.speed est la vitesse d'animation, la facilité est la fonction d'animation. Vous pouvez maintenant faire défiler. La propriété margin-left passe progressivement d'une valeur négative à zéro, la règle entière se déplace doucement vers la droite et le dernier élément vient en premier. Après options.speed microsecondes, la ligne reçoit la valeur précédente 'transition: none' .

 var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed); 

Si vous devez faire défiler n éléments en même temps, la permutation des éléments est effectuée dans une boucle n fois, et la distance marge-gauche augmente n fois.

Le défilement vers la gauche (fonction elemNext ) s'effectue dans l'ordre inverse. Tout d'abord, la propriété 'transition: margin' + options.speed + 'ms facilite' est affectée à la ligne this.crslList et la règle défile en douceur vers la gauche ( crslList.style.marginLeft = '-' + elemWidth + 'px' ). De plus, après microsecondes options.speed , le premier élément est cloné et inséré à la fin de la règle, après quoi le premier élément est supprimé. La règle renvoie la valeur 'transition: none'. Si vous devez faire défiler n éléments en même temps, le réarrangement des éléments, comme dans le cas précédent, est effectué n fois dans une boucle et la distance marge-gauche augmente n fois.

 var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed); 

Si l'option de cycle est désactivée, alors dans ce cas il n'y a pas de permutations des éléments, et la ligne entière d'éléments est déplacée dans son ensemble vers la gauche ou la droite vers ses points extrêmes. La ligne d'éléments de la propriété this.crslList 'transition: margin' + options.speed + 'ms easise' est affectée même lorsque le carrousel est initialisé et n'est plus supprimé.

Le carrousel est appelé par le nom de la classe ant-carrousel ou par identifiant. Dans le second cas, vous pouvez placer plusieurs carrousels sur une seule page. Un fichier carrousel index.html pourrait ressembler à ceci:

 <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Ant-Carousel</title> <!--   --> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> <!--    --> … </div> … <footer> … </footer> <!--   --> <script src="ant-files/ant-carousel. js"></script> <!--   --> <script>new Ant()</script> </body> </html> 

Pour placer plusieurs carrousels sur une seule page, vous devez les appeler par ID. Différents carrousels peuvent avoir un nombre d'éléments différent.

 <div class="ant-carousel" id=”first”> <!--   --> … <div class="ant-carousel" id=”second”> <!--   --> … <script>new Ant("first"); new Ant("second");</script> 

Toutes les images proviennent de sources ouvertes.

Merci de votre attention!