5568 sujets

Sémantique web et HTML

Problème sur des Slideshow

Bonjour, j'essaye de faire trois slideshow sur trois divs alignées. J'ai fait mes trois divs et j'ai même réussi a faire un slideshow. Le problème, c'est que je n'arrive pas a faire apparaitre la première image du slide show de la deuxième div sans passer toutes les images de la première slideshow. J'aimerais que les trois slideshow affichent de base leur première image puis pouvoir intéragir avec chacuns séparément.

Voici mon code html (avec un peut de JavaScript) :

<!DOCTYPE html>
<link rel="stylesheet" href="Bible-accueuil.css">

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

           <!--  ENTETE -->
        
  <div id="entete">
        
            <ul id="nav">
                <li id="barre-nav">Livres</li>
                <li id="barre-nav">Films</li>
                <li id="barre-nav">Animés</li>
                <li id="barre-nav">Musique</li>
            </ul>
            
    </div>
    
            <!-- VIGNETTES -->        
    
    <div id="vignettes">  
        
            <!-- LIVRES -->
        
        <div id="livres">
            <div class="slideshow-container-l">

                <div class="mySlides fade">
                    <img src="Image-slides/GOT.jpg" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="Image-slides/plagueis.jpg" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="Image-slides/yakuza%20(1).jpg" style="width:100%">
                </div>

                <a class="prevl" onclick="plusSlides(-1)">&#10094;</a>
                <a class="nextl" onclick="plusSlides(1)">&#10095;</a>
                
            </div>
           
        </div>
        
            <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
        showSlides(slideIndex += n);
        }   

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}    
            if (n < 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";
        }
    </script>

        
         
        
                <!-- FILMS -->
    
        <div id="films">
            <div class="slideshow-container-f">

                <div class="mySlides fade">
                    <img src="Image-slides/starwars3.jpg" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="Image-slides/LOTR3%20(2).jpg" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="" style="width:100%">
                </div>

                <a class="prevf" onclick="plusSlides(-1)">&#10094;</a>
                <a class="nextf" onclick="plusSlides(1)">&#10095;</a>
                
            </div>
                    
        </div>
        
           <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
        showSlides(slideIndex += n);
        }   

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}    
            if (n < 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";
        }
    </script>
        
        
             <!-- ANIMES -->
    
        <div id="animes">
            <div class="slideshow-container">

                <div class="mySlides fade">
                    <img src="" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="" style="width:100%">
                </div>

                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</a>
                
            </div>
            <br>

            <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> 
            </div>
        </div>
        
    </div>

    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
        showSlides(slideIndex += n);
        }   

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}    
            if (n < 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";
        }
    </script> 
</body>
</html>





Voici maintenant le CSS : 

* {box-sizing: border-box}

.mySlides {display: none}

html {
    height: 100%;
    width: 100%;
}

body {height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    
}


                                            /*BARRE DE NAVIGATION*/

#entete {border: solid;
    width: 100%;
    height: 45px;
    background-color: black; opacity: 80%;
    position: relative;
    
    
}

#nav {
    margin-left: 35%;
    padding: 0;
    position: absolute;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

#nav li {
    
    padding: 0 30px;
    margin: -5px;
    color: white;
    display: block;
    overflow: hidden;
    cursor: pointer;
    float: left;
    width: 125px;
    height: 40px;
    margin-right: 0px;
    background-repeat:no-repeat;
    font-family: Arial;
    font-size: 20px;
    
    
    
}

li:hover {
    color: darkgray; opacity: 75%;
}


                                                        /*VIGNETTES*/


#vignettes {width: 100%;
    padding-top: 270px;
    display: flex;
    justify-content: space-around;
    
    
}
    
                                                        /*LIVRES*/
    #livres {
    border: solid;
    border-color: rgba(0,0,0,.0);
    background-color: rgba(0,0,0,.035);
    height: 320px;
    width: 520px;
    position: relative;
    overflow: hidden;
    
     
    }    
    

.slideshow-container-l {
  
  width: 200px;
  position: inherit;
  height: 320px;
  margin-left: 28.5%;
    margin-top: 4px;
  
  
}


.prevl, .nextl {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 11px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  


}

/* Positiondes boutons "suivant" "précédents" */
.nextl {
  right: 0;
  border-radius: 3px 0 0 3px;

}

.prevl {
    
}

/* On hover, add a black background color with a little bit see-through */
.prevl:hover, .nextl:hover {
  background-color: rgba(0,0,0,0.8); 
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

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



                                                                   /*FILMS*/


#films {border: solid;
    border-color: rgba(0,0,0,.0);
    background-color: rgba(0,0,0,.035);
    height: 320px;
    width: 520px;
}

/* Slideshow container */

.slideshow-container-f {
  
  width: 200px;
  position: absolute;
  height: 320px;
  margin-left: 8.5%;
  margin-top: 5px;
 }

/* Next & previous buttons */
.prevf, .nextf {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 11px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  /*background-color: black;*/
    }

/*Position the "next button" to the right*/
.nextf {
  left: 170px;
  border-radius: 3px 0 0 3px;
}

.prevf {
    right: 170px;
}

/* On hover, add a black background color with a little bit see-through*/
.prevf:hover, .nextf:hover {
  background-color: rgba(0,0,0,0.8);
 }  


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

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



_____________________________________________________________________________________________________

Le problème est surement dans "l'encastrement" et dans le JavaScript car je ne le connais pas mais je dois l'utiliser (je vais commencer a l'apprendre ducoup Smiley confuse ) Voici un screen de ce que cela donne pour l'instant : (cool le screen est trop volumineux...)

Merci d'avance pour votre aide et désolé que ce soit si long
Modifié par Dayka (17 Nov 2019 - 19:45)
On ne peut pas envoyer de simple capture d'écran ?

Que devrais-je modifier dans le javascript pour qu'il s'adapte aux deux autres divs (sachant que là je ne l'ai que duppliquer)
Modifié par Dayka (17 Nov 2019 - 19:46)
Merci aliasdmc pour ton aide, j'ai adapté mon code a celui que tu m'as donné seulement, les images ne s'affichent pas sur mon site... je ne vois pas d'ou vient le problème. Smiley ohwell
aliasdmc a écrit :
Bonjour Dayka,
Un petit exemple, j'ai essayé de décomposer au maximum :
https://codepen.io/Zonecss/pen/OJJrMZX



Merci aliasdmc pour ton aide, j'ai adapté mon code a celui que tu m'as donné seulement, les images ne s'affichent pas sur mon site... je ne vois pas d'ou vient le problème. Smiley ohwell
aliasdmc a écrit :
Bonjour Dayka,
Il faut le code HTML, CSS , JAVASCRIPT


Oui, j'ai bien adapté les codes et lié le css/html/javascript mais les images ne s'affichent toujours pas...

<!DOCTYPE html>
<link rel="stylesheet" href="Bible-accueuil.css">
<link rel="javascript" href="Bible-accueuil.js">

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

           <!--  ENTETE -->
        
  <div id="entete">
        
            <ul id="nav">
                <li id="barre-nav" ><a href ="/Livres/livre.html">Livres</a></li>
                <li id="barre-nav"><a href ="/Livres/livre.html">Films</a></li>
                <li id="barre-nav"><a href ="/Livres/livre.html">Animés</a></li>
                <li id="barre-nav"><a href ="/Livres/livre.html">Musique</a></li>
            </ul>
            
    </div>
    
            <!-- VIGNETTES -->        
    
<div id="vignettes">  
        
            <!-- LIVRES -->
        
  <div id="livres" class="bloc-slideshow">
      <div class="slideshow-container-l">
         
          <div class="mySlides fade">
              <img src="/Image-slides/yakuza%20(1).jpg"  style="width:100%">
          </div>
         
          <div class="mySlides fade">
              <img src="/Image-slides/plagueis.jpg" style="width:100%">
          </div>
         
          <div class="mySlides fade">
              <img src="/Image-slides/GOT.jpg" style="width:100%">
          </div>
          
          <span class="prev"> &#10094; </span>
          <span class="next"> &#10095; </span>
          
      </div>
   </div>
        
        
         
        
                <!-- FILMS -->
    
<div id="films" class="bloc-slideshow">
    <div class="slideshow-container-f">
     
        <div class="mySlides fade">
            <img src="/Image-slides/LOTR3%20(2).jpg" style="width:100%">
        </div>
        
        <div class="mySlides fade">
            <img src="/Image-slides/starwars3.jpg" style="width:100%">
        </div>
       
        <div class="mySlides fade">
          <img src="" style="width:100%">
        </div>
        
        <a class="prev">&#10094;</a>
        <a class="next">&#10095;</a>
        
    </div>
  </div>
        
              
        
   <!-- ANIMES -->
  <div id="animes" class="bloc-slideshow">
    <div class="slideshow-container-a">
      
        <div class="mySlides fade">
            <img src="https://www.zonecss.fr/img/exemple/filter-image.jpg" style="width:100%">
        </div>
      
        <div class="mySlides fade">
            <img src="https://www.zonecss.fr/img/exemple/filter-image-1.png" style="width:100%">
        </div>
     
        <div class="mySlides fade">
            <img src="https://www.zonecss.fr/img/exemple/filter-image-2.png" style="width:100%">
        </div>
      
        <span class="prev">&#10094;</span>
        <span class="next">&#10095;</span>
        
    </div>
    <br>
  </div>
  
  <div id="dot">
    <span class="dot dot-films"></span> 
    <span class="dot dot-animes"></span> 
    <span class="dot dot-livres"></span> 
  </div>
    
</div>
    
    
    

</body>
</html> 



* {box-sizing: border-box}

.mySlides {display: none}

html {
    height: 100%;
    width: 100%;
}

body {height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    
}


                                            /*BARRE DE NAVIGATION*/

#entete {border: solid;
    width: 100%;
    height: 45px;
    background-color: black; opacity: 80%;
    position: relative;
    
    
}

#nav {
    margin-left: 35%;
    padding: 0;
    position: absolute;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

#nav li {
    
    padding: 0 30px;
    margin: -5px;
    color: white;
    display: block;
    overflow: hidden;
    cursor: pointer;
    float: left;
    width: 125px;
    height: 40px;
    margin-right: 0px;
    background-repeat:no-repeat;
    font-family: Arial;
    font-size: 20px;    
    
}

a {color: white;
    text-decoration-line: none;
    
}

li:hover {
    color: darkgray; opacity: 75%;
}


                                                        /*VIGNETTES*/


#vignettes {width: 100%;
    padding-top: 270px;
    display: flex;
    justify-content: space-around;
    
    
}
    
                                                        /*LIVRES*/
    #livres {
    border: solid;
    border-color: rgba(0,0,0,.0);
    background-color: rgba(0,0,0,.035);
    height: 320px;
    width: 520px;
    position: relative;
    overflow: hidden;
  }

.bloc-slideshow{
  border: solid;
  border-color: rgba(0,0,0,.0);
  background-color: rgba(0,0,0,1);

  overflow: hidden;
  height: 320px;
    width: 520px;}

    
/* Slideshow container */
.slideshow-container-l {
  
  width: 200px;
  position: relative;
  height: 320px;
  margin-left: 28.5%;
  margin-top: 4px;
  
  
}

/* -------------- */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 11px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  


}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;

}




.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8); 
}


/* Fading animation */
.fade {
  display:none;
  /* opacity:0; */
  transition : opacite 1.5s linear;
}
.show {
  display:block; 
}


                                                                   /*FILMS*/


#films {border: solid;
    border-color: rgba(0,0,0,.0);
    background-color: rgba(0,0,0,.035);
    height: 320px;
    width: 520px;
}

/* Slideshow container */

.slideshow-container-f {
  
  width: 200px;
  position: absolute;
  height: 320px;
  margin-left: 8.5%;
  margin-top: 5px;
  
  
}

/* Next & previous buttons */
.prevf, .nextf {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 11px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  /*background-color: black;*/
    
 }

/*Position the "next button" to the right*/
.nextf {
  left: 170px;
  border-radius: 3px 0 0 3px;
}

.prevf {
    right: 170px;
}

/* On hover, add a black background color with a little bit see-through*/
.prevf:hover, .nextf:hover {
  background-color: rgba(0,0,0,0.8); 
  
}  


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

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

}
#dot {text-align:center}
#dot span{display:block}
#dot span.selected{color:red}


                                                                    /*ANIMES*/


#animes {border: solid;
    border-color: rgba(0,0,0,.0);
    background-color: rgba(0,0,0,.035);
    height: 320px;
    width: 520px;}

.slideshow-container-a {
  
  width: 200px;
  position: relative;
  height: 320px;
  margin-left: 28.5%;
  margin-top: 4px;
  
  
}


/* //////////////////////////////////////////////
Plus d'informations liées à la solution  : 
////////////////////////////////////////////// */


function addShowSlides(oSlideCont){
  let iSlideIndex = 0, 
      //L'image affiché avant 
      oSlideSelected = null;
  /*
  * Action des boutons prev et next
  */
  function btShowSlides(oEvent){
    let oBt = oEvent.currentTarget; 
    if(oBt.classList.contains("prev")){
      iSlideIndex--;
    }else{
      iSlideIndex++
    }//else
    showSlides();
  }//fct
  /* Action de remettre a 0 le diaporama 
  * action des bt dot 
  */
  function btResetSlides(oEvent){
    iSlideIndex = 0;
    showSlides();
  }//fct
  
  function showSlides() {
    let aSlide = oSlideCont.getElementsByClassName("mySlides"),
        oSlide = null,
        sClassSlected = 'selected',
        sId = oSlideCont.parentNode.id,
        aBtReset = document.getElementsByClassName("dot");  
    if(oSlideSelected != null){ 
      //J'ai affiché nouvelle image je désactive l'ancienne
      oSlideSelected.classList.remove("show"); 
      //Je sélectionne le bouton dot
      // Avoir si on ne peut pas amélioré
      for(let oEl of aBtReset){
        if(oEl.classList.contains('dot-'+sId)){
          oEl.classList.add(sClassSlected);  
        }else{
          if(oEl.classList.contains(sClassSlected)){
            oEl.classList.remove(sClassSlected);  
          }//if
        }//else
      }//for
    }//if
    
    if(iSlideIndex == aSlide.length){
      //Si je suis plus loin que la dernière image
      iSlideIndex = 0;
    }else if(iSlideIndex == -1 ){
      //Si je suis avant la première  image
      iSlideIndex = aSlide.length-1;
    }//elseif
    
    //Je sélectionne l'image et je l'affiche
    oSlide = aSlide[iSlideIndex];
    oSlide.classList.add("show");  
    oSlideSelected = oSlide;
  }//fct

  /* ASSIGNATION DES ACTIONS SUR LES BOUTONS */
  let oPrev = oSlideCont.getElementsByClassName("prev"),
      oNext = oSlideCont.getElementsByClassName("next"),
      oReset = document.getElementsByClassName("dot-"+oSlideCont.parentNode.id); 
  if(oPrev.length== 1){
    oPrev[0].addEventListener('click',btShowSlides);
  }
  if(oNext.length == 1){
    oNext[0].addEventListener('click',btShowSlides);
  }
  if(oReset.length == 1){
    oReset[0].addEventListener('click',btResetSlides);
    oReset[0].innerHTML = oSlideCont.parentNode.id
  }
  //J'affiche le 1ere img 
  showSlides()
}//fct

document.addEventListener('DOMContentLoaded',function(){
  let aSlides = document.getElementsByClassName("slideshow-container");
  for(let oEl of aSlides){
    addShowSlides(oEl)
  }
});
Bonjour Dayka,
let aSlides = document.getElementsByClassName("slideshow-container");
Il n'y a pas de class "slideshow-container"
Bonjour aliasdmc,
Merci, je comprend mieux, mais même avec 3 slides, si je donne le même nom de class aux trois pour le mettre dans le let aSlides en JAVASCRIPT c'est bon ?
Car j'ai essayé en laissant comme nom de class "slideshow-container" pour les trois slides et dans le JAVASCRIPT, mais les images ne s'affichent toujours pas (j'ai vérifié le chemin).
aliasdmc a écrit :
Bonjour Dayka,
let aSlides = document.getElementsByClassName("slideshow-container");
Il n'y a pas de class "slideshow-container"



ducoup je ne vois pas ou est le problème...
Sujet clos
Aller à