Comment créer un diaporama sur une page de son site ?

Il faut en premier lieu créer une nouvelle page ou bien modifier une page existante sur le site, puis passer l'éditeur en plein écran pour avoir accès au mode "Source".


Premièrement, copier le code suivant :

<div class="pnl-carrousel"
   data-autoplay="true"
   data-items="1"
   data-slideby="page"
   data-controls="false"
   data-autoplay-timeout="5000"
>

<div><img alt="" src="/media/A1469723368548/image1.jpg" /></div>
<div><img alt="" src="/media/A1469723368548/image2.jpg" /></div>
<div><img alt="" src="/media/A1469723368548/image3.jpg" /></div>
<div><img alt="" src="/media/A1469723368548/image4.jpg" /></div>

</div>

Différents attributs peuvent être insérés :
  • data-autoplay="false" : permet de désactiver la lecture automatique du diaporama. Par défaut, la lecture automatique est activée.
  • data-items="3" : permet d'afficher plusieurs éléments même temps. par défaut, un seul élément s'affiche.
  • data-slideby="1" : permet de définir combien d'éléments sont déplacés lors d'un mouvement du diaporama. De base, l'intégralité de la page est déplacée.
  • data-controls="true" : permet d'afficher les contrôles pour changer d'image. par défaut, les contrôles sont désactivés.
  • data-autoplay-timeout="X" : permet de définir le temps de défilement de chaque image du diaporama. Il faut renseigner des millisecondes. Dans l'exemple ci-dessus "5000" = 5 secondes.



Ensuite il faut cliquer à nouveau sur "Source", les images du diaporama seront alors visibles.
Il suffit ensuite, pour chacune des images ajoutées au diaporama, de modifier les propriétés pour pouvoir sélectionner l'image souhaitée.



Si vous souhaitez plus d'images à votre diapo, vous pouvez dupliquer une ou plusieurs fois le type de ligne de code suivant dans " Source" à la suite des autres et avant le dernier </div> : 
<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image2.jpg" /></div>

Pour finir, cliquez sur les 4 flèches pour diminuer l'éditeur et pouvoir enregistrer votre page.
Rendu final du diaporama :