<div><img  src="image1.jpg" alt="Comment utiliser Layui pour obtenir un effet carrousel de changement d'image" ></div>
<div><span>标题1</span></div>

<div><img  src="image2.jpg" alt="Comment utiliser Layui pour obtenir un effet carrousel de changement d'image" ></div>
<div><span>标题2</span></div>

<div><img  src="image3.jpg" alt="Comment utiliser Layui pour obtenir un effet carrousel de changement d'image" ></div>
<div><span>标题3</span></div>

layui.use('carousel', function(){
var carousel = layui.carousel;
carousel.render( {

elem: '#carousel',
autoplay: true,
interval: 3000

});
});

1.2 Configuration de l'effet carrousel
En plus de l'utilisation de base, nous pouvons également ajuster certains détails de l'effet carrousel en configurant les paramètres. Par exemple, vous pouvez définir le mode d'animation, la vitesse, la commutation automatique, etc. du carrousel. Les paramètres de configuration spécifiques peuvent être consultés dans la documentation officielle de Layui.

2. Style personnalisé
Par défaut, le style du composant carrousel de Layui est relativement simple. Si nous souhaitons obtenir un style plus personnalisé, nous pouvons personnaliser CSS pour ajuster le style.

2.1 Ajuster la taille du conteneur du carrousel
Définir la largeur et la hauteur du conteneur du carrousel via CSS peut rendre l'effet carrousel plus adaptable à différentes mises en page.

carrousel {

width: 800px;
height: 400px;
}

2.2 Ajustez le style du contenu du carrousel
Ajustez le style du contenu du carrousel via CSS pour rendre l'affichage des images et des titres plus beau.

img du carrousel {

largeur : 100 % ;
hauteur : 100 %;
}

envergure du carrousel {

affichage : bloc ;
 alignement du texte : centre ;
taille de la police : 18 px ;
couleur : #fff ;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}

2.3 Ajustez le style de l'animation du carrousel
Ajustez le style de l'animation du carrousel via CSS pour modifier l'effet pendant le processus de commutation, tel que l'ajout de dégradés, de traduction et d'autres effets d'animation.

.layui-carousel-item {
animation : fondu d'entrée 1s facilité d'entrée-sortie ;
}

@keyframes fondu d'entrée {
0 % {

opacity: 0;
transform: translateY(10px);

}
100 % {

opacity: 1;
transform: translateY(0);

}
}

3. Résumé
Grâce au composant carrousel de Layui, nous pouvons facilement obtenir l'effet carrousel de changement d'image. Avec seulement quelques lignes de code et quelques ajustements CSS, vous pouvez créer des effets de page dynamiques et attrayants. J'espère que cet article vous sera utile. S'il y a des lacunes, donnez-moi vos conseils. Merci d'avoir lu!

(Remarque : le code ci-dessus n'est qu'un exemple, veuillez le modifier et l'ajuster en fonction de la situation spécifique.)