Ajouter des flèches pour passer d'une diapo à l'autre

[admin tt]

Bonjour ^^,
J'ai sur forum un diaporama sur la page d'accueil ^^
J'ai suivi pour cela  ce tuto :

Code:


<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
 
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
 
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
 
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active {
  background-color: #717171;
}
 
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
 
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
 
<div class="slideshow-container">
 
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://i30.servimg.com/u/f30/20/35/61/89/nation11.jpg" style="width:70%; height: 215px">
  <div class="text">Caption Text</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://i30.servimg.com/u/f30/20/35/61/89/cat-2010.jpg" style="width:70%; height: 215px">
  <div class="text">Caption Two</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://i30.servimg.com/u/f30/20/35/61/89/images12.jpg" style="width:70%; height: 215px">
  <div class="text">Caption Three</div>
</div>
 
</div>
<br>
 
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
 
<script>
let slideIndex = 0;
showSlides();
 
function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let 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, 2000); // Change image every 2 seconds
}
</script>


Mais je voudrais savoir s' il y aurait la possibilité d'ajouter des flèches pour passer d'une diapo à l'autre ou pour revenir à la diapo précédente, sans avoir à attendre le temps défini par le code


Merci d'avance ^^

[admin tt]

up

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour @admin tt, Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné. Je vous invite à lire : - Règles générales du forum - Charte de ce forum

[admin tt]

Bonjour  @Chacha,

je suis désole

Eh bien, je vais attendre  

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[admin tt]

Merci, j'attends

[Chacha]

Merci, j'attends

Bonjour,

Vous pouvez remonter votre sujet 1 fois par tranche de 24h.

Cordialement.

[admin tt]

Ma candidature semble très difficile

[Toryudo]

Bonjour !
Et voilà pour les flèches :

Code:

 <style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

#slideshow-left, #slideshow-right {
  position: absolute;
  z-index: 100;
  top: 50%;
  color: #FFF;
  font-size: 30px;
  cursor: pointer;
}
#slideshow-left {
  left: 0;
}
#slideshow-right {
  right: 0;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
<div class="slideshow-container">
    <div class="mySlides fade">
        <div class="numbertext">
            1 / 3
        </div>
        <img style="width:70%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/nation11.jpg" />
        <div class="text">
            Caption Text
        </div>
    </div>
    <div class="mySlides fade">
        <div class="numbertext">
            2 / 3
        </div>
        <img style="width:70%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/cat-2010.jpg" />
        <div class="text">
            Caption Two
        </div>
    </div>
    <div class="mySlides fade">
        <div class="numbertext">
            3 / 3
        </div>
        <img style="width:70%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/images12.jpg" />
        <div class="text">
            Caption Three
        </div>
    </div>
    <div id="slideshow-left"></div>
   <div id="slideshow-right"></div>
</div><br />
<div style="text-align:center">
      <span class="dot"></span>  <span class="dot"></span>  <span class="dot"></span>
</div>
<script>
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");
let timeoutID;
let slideIndex = 1;
showSlides();

function showSlides() {
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active");

  timeoutID = setTimeout(() => {
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1;
    }
    showSlides();
  }, 2000);  // Change image every 2 seconds
}

$('#slideshow-left').click(function(){
  clearTimeout(timeoutID);

  slideIndex--;
  if (slideIndex < 1) {
    slideIndex = slides.length;
  }
  showSlides();
});

$('#slideshow-right').click(function(){
  clearTimeout(timeoutID);

  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  showSlides();
});

</script>

En tant qu'informaticiens, on a souvent l'impression de réinventer la roue... du coup, des fois, ça ne donne pas spécialement envie, on préfère se dire "il faut juste aller trouver un tuto qui possède déjà cette fonctionnalité". Mais bon, pas grave, je vous l'ai quand même fait, à ma sauce !

[admin tt]

ç'est un excellent travail
Merci beaucoup Toryudo

je n'ai qu'une seule demande
https://i.postimg.cc/85dBCkFq/froru2.gif
Notez que lorsque les deux flèches sont enfoncées, les images se déplacent de la voiture vers la droite


Est-il possible de faire le mouvement des images de gauche à droite en appuyant sur la flèche droite ?

Et faites le mouvement des images de droite à gauche en appuyant sur la flèche gauche

[Toryudo]

Bonjour !

Je veux bien que vous me fournissiez le nouveau code du coup, avec les nouvelles transitions, et je repars de là pour corriger ce comportement !
(chez moi, les transitions correspondaient juste à un changement d'opacité)

[admin tt]

Merci Toryudo

Code:

 <style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
 
#slideshow-left, #slideshow-right {
  position: absolute;
  z-index: 100;
  top: 50%;
  color: #FFF;
  font-size: 30px;
  cursor: pointer;
}
#slideshow-left {
  left: 0;
}
#slideshow-right {
  right: 0;
}
 
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
 
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
 
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active {
  background-color: #717171;
}
 
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {transform: translate(-1000px, 0px);}
  to {opacity: 1}
}
 
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
<div class="slideshow-container">
    <div class="mySlides fade">
        <div class="numbertext">
            1 / 3
        </div>
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_ll49rr7fhM1qdtdqeo1_500.jpg" />
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_ll49rr7fhM1qdtdqeo1_500.jpg" />
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_ll49rr7fhM1qdtdqeo1_500.jpg" />
        <div class="text">
            Caption Text
        </div>
    </div>
    <div class="mySlides fade">
        <div class="numbertext">
            2 / 3
        </div>
        <img style="width:30%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/images12.jpg" />
        <img style="width:30%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/images12.jpg" />
        <img style="width:30%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/images12.jpg" />
        <div class="text">
            Caption Two
        </div>
    </div>
    <div class="mySlides fade">
        <div class="numbertext">
            3 / 3
        </div>
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_mabou79THM1rbonrno1_400.gif" />
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_mabou79THM1rbonrno1_400.gif" />
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_mabou79THM1rbonrno1_400.gif" />
        <div class="text">
            Caption Three
        </div>
    </div>
    <div id="slideshow-left"></div>
  <div id="slideshow-right"></div>
</div><br />
<div style="text-align:center">
      <span class="dot"></span>  <span class="dot"></span>  <span class="dot"></span>
</div>
<script>
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");
let timeoutID;
let slideIndex = 1;
showSlides();
 
function showSlides() {
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active");
 
  timeoutID = setTimeout(() => {
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1;
    }
    showSlides();
  }, 2000);  // Change image every 2 seconds
}
 
$('#slideshow-left').click(function(){
  clearTimeout(timeoutID);
 
  slideIndex--;
  if (slideIndex < 1) {
    slideIndex = slides.length;
  }
  showSlides();
});
 
$('#slideshow-right').click(function(){
  clearTimeout(timeoutID);
 
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  showSlides();
});
 
</script>

[Toryudo]

Et voilà le code pour le mouvement des images de gauche à droite en appuyant sur la flèche droite, et le mouvement des images de droite à gauche en appuyant sur la flèche gauche :

Code:

 <style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

#slideshow-left, #slideshow-right {
  position: absolute;
  z-index: 100;
  top: 50%;
  color: #FFF;
  font-size: 30px;
  cursor: pointer;
}
#slideshow-left {
  left: 0;
}
#slideshow-right {
  right: 0;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

.fadeD {
  animation-name: fadeD;
  animation-duration: 1.5s;
}
@keyframes fadeD {
  from {transform: translate(-1000px, 0px);}
  to {opacity: 1}
}

.fadeG {
  animation-name: fadeG;
  animation-duration: 1.5s;
}
@keyframes fadeG {
  from {transform: translate(1000px, 0px);}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
<div class="slideshow-container">
    <div class="mySlides">
        <div class="numbertext">
            1 / 3
        </div>
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_ll49rr7fhM1qdtdqeo1_500.jpg" />
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_ll49rr7fhM1qdtdqeo1_500.jpg" />
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_ll49rr7fhM1qdtdqeo1_500.jpg" />
        <div class="text">
            Caption Text
        </div>
    </div>
    <div class="mySlides">
        <div class="numbertext">
            2 / 3
        </div>
        <img style="width:30%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/images12.jpg" />
        <img style="width:30%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/images12.jpg" />
        <img style="width:30%; height: 215px" src="https://i.servimg.com/u/f30/20/35/61/89/images12.jpg" />
        <div class="text">
            Caption Two
        </div>
    </div>
    <div class="mySlides">
        <div class="numbertext">
            3 / 3
        </div>
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_mabou79THM1rbonrno1_400.gif" />
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_mabou79THM1rbonrno1_400.gif" />
        <img style="width:30%; height: 215px" src="https://2img.net/h/280x/25.media.tumblr.com/tumblr_mabou79THM1rbonrno1_400.gif" />
        <div class="text">
            Caption Three
        </div>
    </div>
    <div id="slideshow-left"></div>
  <div id="slideshow-right"></div>
</div><br />
<div style="text-align:center">
      <span class="dot"></span>  <span class="dot"></span>  <span class="dot"></span>
</div>
<script>
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");
let timeoutID;
let slideIndex = 1;
showSlides();

function resetSlide(){
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
   slides[i].classList.remove("fadeD", "fadeG");
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active");
  }
}

function nextSlide(){
  resetSlide();
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex-1].classList.add("fadeD");
}

function prevSlide(){
  resetSlide();
  slideIndex--;
  if (slideIndex < 1) {
    slideIndex = slides.length;
  }
  slides[slideIndex-1].classList.add("fadeG");
}

function showSlides() {
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active");

  timeoutID = setTimeout(() => {
    nextSlide();
    showSlides();
  }, 2000);  // Change image every 2 seconds
}

$('#slideshow-left').click(function(){
  clearTimeout(timeoutID);

  prevSlide();
  showSlides();
});

$('#slideshow-right').click(function(){
  clearTimeout(timeoutID);

  nextSlide();
  showSlides();
});
</script>

[admin tt]

Toryudo
Tu es si intelligent et gentil  



Merci beaucoup  Toryudo