Diaporama ne montrant pas les flèches gauche/droite

J'ai quatre diaporamas sur mon site Web, et avant que j'aie ajouté la fonction jQuery Backstretch, ils fonctionnaient tous très bien. Maintenant, les flèches gauche et droite apparaissent circulaires et noires - mais lorsque l'image de la flèche est glissée dans un nouvel onglet, vous pouvez le voir comme il se doit.
Diaporama ne montrant pas les flèches gauche/droite

Voici mon code diaporama:

<div dir="ltr" style="text-align: left;" trbidi="on"> 
<center> 

<html> 
<title>W3.CSS</title> 

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"></link> 
<style> 
.mySlides {display:none} 
</style> 
<body> 

<div class="w3-container"> 
</div> 
<div class="w3-content" style="max-width: 771px;"> 

    <img class="mySlides" src="https://1.bp.blogspot.com/-M7Z6DU_4rr4/WH854ptAAnI/AAAAAAAAfxk/lT87QTRG-K8IV_KT0bp4rNOpdI2c2Z3xgCLcB/s1600/A.jpg" style="width: 771px;" /> 
    <img class="mySlides" src="https://2.bp.blogspot.com/-os3VKF2UqTY/WH86xNs-pjI/AAAAAAAAfzk/vbnk731lmio-YwBYtybdtyEwLWR2H0HuQCLcB/s1600/Z25.jpg" style="width: 771px;" /> 
    <img class="mySlides" src="https://1.bp.blogspot.com/-q-mfkdFqElk/WH86yBXX2nI/AAAAAAAAfzo/GT8IOltOyho76hyksDTl89L9yJ2pfG0mwCLcB/s1600/Z30.jpg" style="width: 771px;" /> 


<a class="w3-btn-floating" onclick="plusDivs(-1)" style="left: 0; position: absolute; top: 45%;"><img src="https://1.bp.blogspot.com/-9TRFDOt59CI/Vz4EANpBSuI/AAAAAAAAdbY/wn8hFl3KfGAdq5jqeE1XZ00STJDBPaRoQCLcB/s1600/left.png" style="height: 22px; width: 16px;" /></a> 
<a class="w3-btn-floating" onclick="plusDivs(1)" style="position: absolute; right: 0; top: 45%;"><img src="https://3.bp.blogspot.com/-0oFX79ip8cY/Vz4EAMYwacI/AAAAAAAAdbU/429-hZhCwhAEZOWn7bqVb1Ze7Ub0h-1FgCLcB/s1600/right.png" style="height: 22px; width: 16px;" /></a> 

</div> 
<script> 
var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function currentDiv(n) { 
    showDivs(slideIndex = n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo"); 
    if (n > x.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = x.length} ; 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" w3-border-red", ""); 
    } 
    x[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " w3-border-black"; 
} 
</script> 

</body> 
</html> 
</center> 
</div>

Source

2017-02-17 Leela

Votre code fonctionne bien, il vous suffit d'ajouter propriété z-index à vos images flèche afin qu'il soit rendu sur l'image et j'ai aussi a commenté l'élément points car il n'y en avait pas à ce jour.

Voici l'extrait de travail

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("demo"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} ; 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-border-red", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
// dots[slideIndex-1].className += " w3-border-black"; 
 
// since you dont have any element with name demo this returns error 
 
}

  .mySlides { 
 
       display: none 
 
      }

<div dir="ltr" style="text-align: left;" trbidi="on"> 
 
    <center> 
 

 
     <html> 
 
     <title>W3.CSS</title> 
 

 
     <link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"></link> 
 

 
     <body> 
 

 
      <div class="w3-container/"> 
 
      <div class="w3-content" style="max-width: 771px;"> 
 

 
       <img class="mySlides" src="https://1.bp.blogspot.com/-M7Z6DU_4rr4/WH854ptAAnI/AAAAAAAAfxk/lT87QTRG-K8IV_KT0bp4rNOpdI2c2Z3xgCLcB/s1600/A.jpg" 
 
        style="width: 771px;" /> 
 
       <img class="mySlides" src="https://2.bp.blogspot.com/-os3VKF2UqTY/WH86xNs-pjI/AAAAAAAAfzk/vbnk731lmio-YwBYtybdtyEwLWR2H0HuQCLcB/s1600/Z25.jpg" 
 
        style="width: 771px;" /> 
 
       <img class="mySlides" src="https://1.bp.blogspot.com/-q-mfkdFqElk/WH86yBXX2nI/AAAAAAAAfzo/GT8IOltOyho76hyksDTl89L9yJ2pfG0mwCLcB/s1600/Z30.jpg" 
 
        style="width: 771px;" /> 
 

 

 
       <a class="w3-btn-floating" onclick="plusDivs(-1)" style="left: 0; position: absolute; top: 45%; z-index: 2;"><img src="https://1.bp.blogspot.com/-9TRFDOt59CI/Vz4EANpBSuI/AAAAAAAAdbY/wn8hFl3KfGAdq5jqeE1XZ00STJDBPaRoQCLcB/s1600/left.png" 
 
         style="height: 22px; width: 16px;" /></a> 
 
       <a class="w3-btn-floating" onclick="plusDivs(1)" style="position: absolute; right: 0; top: 45%; z-index: 2;"><img src="https://3.bp.blogspot.com/-0oFX79ip8cY/Vz4EAMYwacI/AAAAAAAAdbU/429-hZhCwhAEZOWn7bqVb1Ze7Ub0h-1FgCLcB/s1600/right.png" 
 
         style="height: 22px; width: 16px;" /></a> 
 

 
      </div> 
 

 
     </body> 
 

 
     </html> 
 
    </center> 
 
</div>

Source

2017-02-17 19:53:57 warl0ck

Merci! Mais je crains d'être trop fatigué pour penser clairement (ou généralement trop inexpérimenté) - j'ai copié et collé le code, tel quel, sur mon site web et ça ne semble pas fonctionner? – Leela

quel que soit le code que vous avez partagé, il fonctionne comme vous pouvez le voir dans l'extrait ici, s'il y a un autre problème s'il vous plaît partager le problème exact – warl0ck

Oui, je peux voir que le code fourni fonctionne) mais quand je le copie et le colle sur mon blog, dans l'ordre dans lequel il se trouve dans votre message, cela ne fonctionne pas. – Leela

Diaporama ne montrant pas les flèches gauche/droite

Répondre

Questions connexes