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

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par admin tt Mar 21 Fév 2023 - 21:04

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


Dernière édition par admin tt le Sam 4 Mar 2023 - 20:02, édité 1 fois
admin tt

admin tt
*

Messages : 34
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par admin tt Mer 22 Fév 2023 - 1:33

up
admin tt

admin tt
*

Messages : 34
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par Chacha Mer 22 Fév 2023 - 9:18

Ajouter des flèches pour passer d'une diapo à l'autre 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
Ajouter des flèches pour passer d'une diapo à l'autre 9Wrx4p4Bonjour @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 :
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par admin tt Mer 22 Fév 2023 - 16:57

Bonjour  @Chacha,

je suis désole Gloups

Eh bien, je vais attendre  ::fleur::
admin tt

admin tt
*

Messages : 34
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par Chacha Mar 28 Fév 2023 - 9:15

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

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 »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par admin tt Mer 1 Mar 2023 - 5:17

Merci, j'attends Visage frustré
admin tt

admin tt
*

Messages : 34
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par Chacha Mer 1 Mar 2023 - 9:14

admin tt a écrit:Merci, j'attends Visage frustré
Bonjour,

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

Cordialement.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par admin tt Jeu 2 Mar 2023 - 7:21

Ma candidature semble très difficile reflexion
admin tt

admin tt
*

Messages : 34
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par Toryudo Jeu 2 Mar 2023 - 18:14

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 !
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1348
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par admin tt Sam 4 Mar 2023 - 1:30

ç'est un excellent travail Yes
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
admin tt

admin tt
*

Messages : 34
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par Toryudo Sam 4 Mar 2023 - 9:05

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é)
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1348
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par admin tt Sam 4 Mar 2023 - 14:19

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>
admin tt

admin tt
*

Messages : 34
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par Toryudo Sam 4 Mar 2023 - 17:36

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

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1348
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter des flèches pour passer d'une diapo à l'autre

Message par admin tt Sam 4 Mar 2023 - 20:01

Toryudo
Tu es si intelligent et gentil  Flowers2



Merci beaucoup  Toryudo
résolu
admin tt

admin tt
*

Messages : 34
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum