Optimiser le carrousel d'image illimité CSS: dites au revoir aux lacunes et réalisez le défilement en douceur et réactif

Cet article traite en détail des lacunes et des exceptions d'affichage communes lors de la création de carrousels d'image illimités à l'aide de HTML et CSS. En analysant les limites de la largeur fixe et des modèles de mise en page, une solution basée sur une conception réactive et une animation CSS précise est fournie. Le tutoriel vous guidera pour optimiser les propriétés CSS, telles que l'utilisation de dispositions en ligne et les largeurs d'éléments de calcul dynamiquement, et configurez correctement les animations @keyframes pour finalement obtenir un effet de défilement d'image illimité en douceur, sans faille et multi-appareils.

Comprendre le principe du carrousel de défilement infini

Les carrousels d'image infinis obtiennent généralement des boucles transparentes en copie un ensemble d'éléments d'image et en panorant le conteneur entier de la moitié de sa largeur dans l'animation CSS. Lorsque le premier ensemble d'images est complètement éloigné de la fenêtre, le deuxième ensemble d'images est juste en place, tandis que l'animation réinitialise tranquillement le conteneur à sa position initiale, créant un visuel de défilement infini. Le cœur de cette approche est de s'assurer que les éléments d'image peuvent couvrir complètement la largeur du conteneur parent afin qu'il n'y ait pas d'espace pendant les transitions.

Analyse des problèmes: pourquoi les lacunes et les anomalies affichent-elles?

Les problèmes des lacunes et l'affichage d'images incomplets dans l'implémentation originale proviennent principalement des aspects suivants:

1. Largeur fixe et couverture insuffisante : les éléments .banner et .profile utilisent des largeurs de pixels fixes. À différentes tailles de fenêtre, ces largeurs fixes peuvent faire en sorte que les éléments d'image ne couvrent pas complètement la largeur du container, en particulier lorsque l'animation passe au point de commutation, la zone vide sera exposée. Le mécanisme de défilement infini nécessite que la largeur totale de l'élément soit au moins le double de la fenêtre, et la largeur de chaque élément enfant doit travailler ensemble pour remplir le conteneur parent.
2. Effets potentiels de l'affichage: Flex : Bien que l'affichage: Flex est très utile dans de nombreuses dispositions, lorsqu'elles sont combinées avec l'espace blanc: Nowrap et position: Absolu, il peut entrer en conflit avec le principe de défilement infini, ou dans certains cas, introduire un comportement de mise en page inattendu.
3. L'animation La définition de la transaction clé est manquante ou inexacte : l'effet de traduction de l'animation dépend de la règle @keyframes. Si la règle n'est pas correctement définie ou si le pourcentage de traduction est inexact (par exemple, sans traduction exacte de 0% à -50%), des boucles infinies ne peuvent pas être obtenues.

Solution: construire un carrousel infini lisse et réactif

Pour résoudre les problèmes ci-dessus et réaliser un carrousel d'image lisse, réactif et illimité, nous devons affiner la structure HTML et optimiser de manière critique le CSS.

Structure HTML

La structure HTML maintient la stratégie des éléments de double image, qui est la pierre angulaire de la réalisation de défilement transparent et infini. Pour la démonstration, nous utilisons l'image d'espace réservé fournie par Picsum.photos.

 

<adal>
  <meta charset="utf-8">
  <meta name="Viewport" content="width = Device-width, initial-scale = 1">
  <title> Carrousel photo illimité 
  <link rel="Stylesheet" href="style.css">
 head>
</title>
  <div class="conteneur">
    <div class="bannière">
      
      <div class="profil">
        <img src="https://picsum.photos/id/1015/200/300" alt="image 1">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1016/200/300" alt="image 2">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1015/200/300" alt="image 3">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1016/200/300" alt="image 4">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1015/200/300" alt="image 5">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1016/200/300" alt="image 6">
      </div>
      
      <div class="profil">
        <img src="https://picsum.photos/id/1015/200/300" alt="image 7">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1016/200/300" alt="image 8">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1015/200/300" alt="image 9">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1016/200/300" alt="image 10">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1015/200/300" alt="image 11">
      </div>
      <div class="profil">
        <img src="https://picsum.photos/id/1016/200/300" alt="image 12">
      </div>
    </div>
  </div>

</adal>

Réglage des clés CSS

Voici les principaux ajustements CSS pour implémenter des carrousels illimités réactifs:

 / * Réinitialisation globale pour assurer la cohérence * /
* {
  marge: 0;
  rembourrage: 0;
  Dimensionnement en boîte: Border-Box;
}

/ * Style de conteneur * /
.Container {
  hauteur: 250px; / * Définir la hauteur du conteneur * /
  Largeur: 90%; / * La largeur du conteneur représente 90% de l'élément parent * /
  Position: relative; / * positionnement relatif, fournissant un contexte de positionnement pour les éléments enfants * /
  débordement: caché; / * Masquer le contenu au-delà du conteneur * /
  marge: 0 auto; / * Le conteneur est centré horizontalement * /
  / * L'affichage d'origine: grille; Items de lieu: Centre; a été supprimé car la bannière utilisera le positionnement absolu et le flex en ligne * /
}

/ * Style de barre de carrousel * /
.banner {
  Position: absolue; / * Positionnement absolu, loin du flux de documents * /
  Espace blanc: Nowrap; / * Empêcher les éléments enfants de s'envelopper, assurez-vous qu'ils sont tous sur une seule ligne * /
  / * Affichage d'origine: flex; et largeur fixe largeur: calc (250px * 12); supprimé*/
  Animation: Scroll 40S Linear Infinite; / * Appliquer l'animation de défilement * /
  taille de police: 0; / * Éliminez l'espacement par défaut qui peut se produire entre les éléments en ligne-flex * /
}

/ * Définir l'animation de défilement * /
@KeyFrames Scroll {
  0% {
    transformée: tradlatex (0); / * Lorsque l'animation commence, cela ne traduit pas * /
  }
  100% {
    Transform: Translatex (-50%); / * Lorsque l'animation se termine, traduire la moitié de sa largeur vers la gauche * /
  }
}

/ * Style d'article à image unique * /
.profil {
  hauteur: 500px; / * La hauteur de l'élément d'image, notez qu'elle est plus élevée que le conteneur, déborde: caché va recadrer * /
  / * Largeur fixe d'origine: 150px; supprimé*/
  Largeur: calc (100vw / 5); / * Largeur réactive: chaque élément d'image occupe 1/5 de la largeur de la fenêtre * /
  Affichage: en ligne-flex; / * Utilisez en ligne-flex pour afficher les éléments dans une ligne et maintenir les fonctionnalités Flexbox * /
  Align-Items: Centre; / * image de centrage vertical * /
  rembourrage: 15px; / * Marge intérieure * /
  Perspective: 100px; / * Effet de perspective 3D, amovible s'il n'est pas requis * /
  taille de police: initial; / * Restaurez la taille de la police de l'élément interne pour empêcher la taille de la police: 0 affectant * /
}

/ * Style d'image * /
.profile img {
  Largeur: 100%; / * La largeur d'image remplit l'élément parent (profil) * /
  Hauteur: Auto; / * Gardez la proportion d'image * /
}

Choses à noter

1. Précision de la largeur Calcul : Largeur: CALC (100VW / 5) Supposons que vous souhaitez afficher 5 images complètes à tout moment. Si vous devez afficher un nombre différent d'images, ou si vous avez une exigence de largeur d'image fixe, vous devez ajuster cette valeur calculée en conséquence. Par exemple, si vous souhaitez afficher 4 images, passez à CALC (100VW / 4).
2. Taille de police: 0 et taille de police: Initial : Réglage de la police-taille: 0 sur le .banner consiste à éliminer l'espacement par défaut causé par les espaces ou le retour du chariot entre les éléments en ligne ou en bloc en ligne. Ensuite, le réglage de la taille de la police: Initial dans le .profile peut garantir que s'il y a du contenu texte à l'intérieur du .profile, sa taille de police peut être affichée normalement sans être affectée par la police parentale: 0.
3. Gestion de la hauteur verticale : Dans l'exemple, la hauteur du .profile (500px) est supérieure à la hauteur du container (250px), et les ensembles de contacts débordent: caché. Cela signifie que le contenu de l'image sera recadré. Selon les exigences de conception réelles, vous devrez peut-être ajuster la hauteur du .profile ou la hauteur du container. Ou ajuster la taille de l'image elle-même pour s'assurer que l'image est entièrement affichée.
4. Chemin d'image : assurez-vous que le chemin d'image SRC dans HTML est correct. Ce tutoriel utilise des images d'espace réservées. Veuillez les remplacer par vos images locales ou CDN dans des projets réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!