Intégration d'un diaporama

Tout d'abord vous devez soit créer une nouvelle page, soit modifier une page déjà existante sur laquelle vous souhaitez insérer le diaporama. Vous utilisez les "4 flèches" pour agrandir la fenêtre et allez sur le mode  "Source". 



Premièrement, copier le code suivant : 
 

<div class="pnl-caroussel">

<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image1.jpg" /></div>

<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image2.jpg" /></div>

<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image3.jpg" /></div>

<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image4.jpg" /></div>

</div>

Par défaut, le diaporama occupera toute la largeur disponible dans le cadre où il est inséré. Vous devez par contre définir une hauteur dans l'attribut "height", dans l'exemple "350px".

Différents attributs peuvent être insérés : 

- data-controls="true" : permet d'afficher les contrôles pour changer d'image. par défaut, les contrôles sont désactivés.

- data-items="3" : permet d'afficher plusieurs éléments même temps. par défaut, un seul élément s'affiche.

- data-autoplay="false" : permet de désactiver la lecture automatique du diaporama. Par défaut, la lecture automatique est activée.

- 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.



Aperçu final : 


Ensuite cliquez à nouveau sur "Source", vous apercevez alors les images du diapo. Double cliquez sur chacune d'entre elles pour les modifier et les remplacer par une de vos photos en allant sur "Parcourir le serveur" dans la fenêtre "Propriétés de l'image" qui s'ouvre. 




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 la fenêtre et pouvoir enregistrer votre page.