mip-carrousel carrousel multi-images
mip-carousel est utilisé pour prendre en charge une méthode d'affichage d'images dans mip, permettant un carrousel multi-images.
Exemple
disposition de la réponse
<mip-carousel layout="responsive" width="600" height="400"> <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
Carrousel automatique
<mip-carousel autoplay layout="responsive" width="600" height="400"> <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
Définir l'intervalle de temps du carrousel
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400"> <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
Ajouter un indicateur
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400" indicator > <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
Ajouter un bouton de page
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400" indicator buttonController > <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
Ajouter un sous-titre
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400" indicator buttonController > <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa"> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive" width="600" height="400"> </mip-img> <div class="mip-carousle-subtitle">这里是title2</div> </a> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
non-mip -carrousel direct Le mip- Le nœud img de l'élément enfant doit définir les attributs de largeur et de hauteur
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400"> <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa"> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" height="400"> </mip-img> </a> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
attribut
width
Description : La largeur, et non la largeur réelle, est utilisée en conjonction avec l'attribut de hauteur pour définir la proportion de l'image
Option obligatoire : Oui
Type : Nombre
Unité : Aucun
Valeur par défaut : Aucun
hauteur
Description : La hauteur, et non la hauteur réelle, fonctionne avec l'attribut largeur pour définir le rapport de l'image
Options requises : Oui
Type : Nombre
Unité : Aucun
Valeur par défaut : Aucune
autoplay
Description : Changement de carrousel automatique
Option requise : Non
Type : chaîne ou vide
Valeur : "", autoplay
Unité : Aucune
Valeur par défaut : Aucune
defer
Description : Le intervalle de temps pour chaque rotation, si défini autoplay
,可以添加defer
pour spécifier l'intervalle de temps du carrousel
Option obligatoire : Non
Type : Nombre
Unité : ms
Valeur par défaut : 2000