Position actuelle: Accueil> Derniers articles> Guide de création de carrousels d'image dynamique et de diaporamas avec PHP

Guide de création de carrousels d'image dynamique et de diaporamas avec PHP

M66 2025-06-24

Implémentez la structure de base de la page du carrousel d'image

Avant de construire la fonction de carrousel Image, la première étape consiste à concevoir sa structure HTML. Nous configurons généralement un conteneur pour le carrousel et nichons toutes les images des éléments enfants. Voici un exemple structurel:
<div class="slider-container">
  <div class="slides">
    <!-- Les éléments d&#39;image seront PHP Génération dynamique -->
  </div>
</div>

Ajouter le composant de carrousel d'embellissement de style

Afin de faire apparaître l'image du carrousel bien sur la page, nous devons écrire CSS pour définir la taille du conteneur, le zoom et la mise en page de l'image, etc.:
.Slider-container {
  Largeur: 600px;
  hauteur: 400px;
  Position: relative;
  débordement: caché;
}

.SLAIDS {
  Largeur: 100%;
  hauteur: 100%;
  Affichage: flex;
}

.SLAIDS IMG {
  Largeur: 100%;
  hauteur: 100%;
  FIT d&#39;objet: couverture;
}

Générer dynamiquement des listes d'images avec PHP

Les images dans les carrousels sont généralement du côté serveur, pour lesquelles nous utilisons PHP pour sortir dynamiquement des balises d'image du tableau. Ce qui suit est de savoir comment l'implémenter:
<?php
$images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

echo '<div class="slider-container"> &#39;;;
écho &#39;<div class="slides"> &#39;;;
foreach ($ images comme $ image) {
  écho &#39;<img src="' . $image . '" alt="Glisser"> &#39;;;
}
écho &#39;</div> &#39;;;
écho &#39;</div> &#39;;;
?>

Le code ci-dessus sera généré automatiquement en fonction du chemin du fichier dans le tableau des images $ élément.

Utilisez Swiper.js pour ajouter des effets d'animation de carrousel

Ensuite, nous ajoutons les fonctions de glissement et de lecture automatique au carrousel. Une bibliothèque de carrousel JavaScript mature, comme le glissement, peut être utilisée. Introduisez d'abord le script JS de Swiper dans HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

Initialisez ensuite la logique du carrousel de glissement pour prendre en charge le défilement de la boucle et la commutation automatique:

<script>
var mySwiper = new Swiper('.slider-container', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
});
</script>

Résumer

En intégrant la structure de la page HTML, le style CSS, la sortie dynamique PHP et la logique d'animation JavaScript, nous pouvons créer un système de carrousel d'image hautement interactif et dynamique. Cette fonction est très adaptée à une utilisation sur des pages telles que les sites Web officiels de l'entreprise, les affichages de travail, les sujets d'événements, etc., et est également pratique pour la maintenance future et le remplacement d'images.