Tutoriel sur la mise en œuvre de la fonction de commutation de carrousel d'images à l'aide du composant swiper WeChat Xiaocheng

Cet article présente principalement l'utilisation par WeChat Xiaocheng du composant swiper pour implémenter la fonction d'affichage de commutation du carrousel d'images, et implique l'utilisation des attributs associés du composant swiper. J'espère que cela pourra aider tout le monde.

1. Affichage des effets

2.

index.wxml :

<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;">
 <swiper-item>
 <image src="../../pages/images/img1.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img2.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img3.png" style="display: block;height: 300px;"/>
 </swiper-item>
</swiper>

la description de l'attribut du composant swiper est la suivante :

Nom de l'attribut	Type	Valeur par défaut	Description	Version minimale
indicateur-points	Booléen	false	S'il faut afficher les points indicateurs du panneau
couleur de l'indicateur	Couleur	rgba(0, 0, 0, .3)	Couleur de l'indicateur	1.1.0
indicator-active-color	Couleur	#000000	Point indicateur actuellement sélectionné Couleur	1.1.0
lecture automatique	Booléen	false	S'il faut basculer automatiquement
actuel	Numéro	0	index de la page courante
intervalle	Numéro	5000	Intervalle de commutation automatique
durée	Nombre	500	Durée de l'animation coulissante
circulaire	Booléen	faux	S'il faut utiliser le glissement de connexion
vertical	Booléen	false	Si la direction de glissement est portrait
bindchange	EventHandle		L'événement de changement sera déclenché lorsque les changements actuels, event.detail = { actuel : actuel, source : source}

Comment utiliser js pour implémenter un carrousel d'images de page Web

Exemple d'implémentation de l'effet de carrousel d'images JQuery

Plug-in de carrousel d'images personnalisé simple jQuery et exemple d'utilisation

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!