Différences entre versions de « Modèle:ResponsivePolaroidImagesSlideShow »
De wikilab
| Ligne 1 : | Ligne 1 : | ||
<noinclude> | <noinclude> | ||
| − | == | + | == Modèle pour afficher une belle liste responsive d'images == |
</noinclude> | </noinclude> | ||
| − | <div class="polaroid" style="width | + | <!-- Ajoutez une classe à votre div pour cibler le diaporama --> |
| − | [[{{{ | + | <div class="polaroid slideshow" style="width:100%; height:100%;"> |
| − | <div class="container-polaroid"> | + | <!-- Vos images ici --> |
| − | <p><div class="polaroid-title>[[{{{ | + | <img class="slides" src="[[{{{4}}}]]" style="width:300px;" alt="{{{3}}}"> |
| − | </div> | + | <!-- Ajoutez autant d'images que vous le souhaitez avec la classe 'slides' --> |
| + | |||
| + | <div class="container-polaroid"> | ||
| + | <p> | ||
| + | <div class="polaroid-title">[[{{{7}}}|{{{6}}}]]</div> | ||
| + | <br>{{{3}}} | ||
| + | </p> | ||
| + | </div> | ||
</div> | </div> | ||
| + | |||
| + | <!-- Ajoutez ce script à la fin de votre page ou dans un fichier JS externe --> | ||
| + | <script> | ||
| + | var slideIndex = 0; | ||
| + | showSlides(); | ||
| + | |||
| + | // Fonction pour changer les diapositives automatiquement | ||
| + | function showSlides() { | ||
| + | var i; | ||
| + | var slides = document.getElementsByClassName("slides"); | ||
| + | for (i = 0; i < slides.length; i++) { | ||
| + | slides[i].style.display = "none"; | ||
| + | } | ||
| + | slideIndex++; | ||
| + | if (slideIndex > slides.length) {slideIndex = 1} | ||
| + | slides[slideIndex-1].style.display = "block"; | ||
| + | // Change image every 5 seconds | ||
| + | setTimeout(showSlides, 5000); | ||
| + | } | ||
| + | </script> | ||
Version actuelle datée du 7 juin 2024 à 13:10
Modèle pour afficher une belle liste responsive d'images
<script> var slideIndex = 0; showSlides();
// Fonction pour changer les diapositives automatiquement function showSlides() {
var i;
var slides = document.getElementsByClassName("slides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
// Change image every 5 seconds
setTimeout(showSlides, 5000);
} </script>
