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'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'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"> ';;
écho '<div class="slides"> ';;
foreach ($ images comme $ image) {
écho '<img src="' . $image . '" alt="Glisser"> ';;
}
écho '</div> ';;
écho '</div> ';;
?>
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.