J'ai commencé avec le guide "HOW TO" de w3schools sur la création d'un diaporama, et bien qu'il donne des options pour un diaporama automatique OU un diaporama avec des flèches de contrôle et des indicateurs de diapositives, il ne vous dit pas comment faire les deux.
Après quelques recherches sur ce site, j'ai trouvé ceci (code en bas de ce message) Diaporama automatique avec bouton -- mais il y a deux problèmes avec cette solution :
- Si je clique sur un bouton indicateur en bas de page qui n'est pas le prochain à être affiché automatiquement, le diaporama passera bien à cet élément mais ne sera pas Il ne passe pas à la diapositive qui suit celle sur laquelle je viens de cliquer, mais à la diapositive qui devait s'afficher ensuite dans le cas où je n'aurais jamais cliqué sur un bouton. Le même problème se pose si j'utilise les flèches ; les boutons du bas sont simplement plus faciles à utiliser comme exemple.
Ex. J'ai des diapositives, étiquetées A, B, C et D. La page se charge et me fait démarrer sur la diapositive A. L'intervalle de temps désigné passe et le diaporama se déplace sur B. Je clique sur le bouton indicateur de diapositive pour me déplacer sur la diapositive A, et il me déplace sur A. Puis la page m'amène à C, comme si je n'avais jamais cliqué sur A. Je veux que le diaporama continue à partir de l'endroit où je clique (A) pour le faire démarrer, et non à partir de l'endroit où il avait "l'intention" d'aller avant que je ne clique (C). - Si je clique sur l'un des boutons pour changer la diapositive après qu'une partie seulement du temps du compteur se soit écoulée, le compteur ne se remet pas à zéro ; il continue comme si je n'avais pas changé la diapositive, puis il recommence lorsqu'il se déplace à nouveau automatiquement.
Ex. Le temps avant le changement automatique de diapositive est de 5 secondes. Je clique sur la flèche droite après seulement 3 secondes de visualisation de la diapositive A. Le diaporama affiche alors la diapositive B. mais seulement pendant les 2 secondes restantes avant de passer à la diapositive C.
J'ai essayé un certain nombre de solutions, comme la création de fonctions pour réinitialiser le minuteur d'intervalle, mais toutes ont fini par casser le code et faire disparaître mon diaporama. Je posterais bien un lien vers mon Codepen pour donner un exemple, mais depuis que j'ai créé le stylo plus tôt dans la journée, le site ne fonctionne plus dès que je me rends sur la page "Stylos" de mon profil. (Si vous êtes vraiment intéressés, allez sur Codepen et cherchez moi -- le nom d'utilisateur est lgcorpora -- et essayez de cliquer sur le stylo appelé "Diaporama automatique avec boutons" -- il devrait être juste en haut).
var slideIndex = 0;
showSlides();
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 8 seconds
}
function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<1){slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[index-1].style.display = "block";
dots[index-1].className += " active";
}
#slide{
width:96%;
}
* {
box-sizing: border-box
}
.mySlides {
display: none
}
.slideshow-container {
width: auto;
position: relative;
margin: -10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #494B55;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #494B55;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 2s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
.pics
{
border:3px solid #494B55;
width:200px;
}
<div class="ss-container">
<div class="mySlides fade">
<img src="https://www.w3schools.com/css/img_5terre.jpg" class="pics"/>
</div>
<div class="mySlides fade">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="pics"/>
</div>
<div class="mySlides fade">
<img src="https://www.w3schools.com/css/img_lights.jpg" class="pics"/>
</div>
<div class="mySlides fade">
<img src="https://www.w3schools.com/css/img_mountains.jpg" class="pics"/>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- Putting in the click dots -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
