11484 sujets

JavaScript, DOM et API Web HTML5

Besoin d'aide pour mes slides, urgent!

Besoin d'aide pour mon site c'est assez urgent!
J'ai crée un slideshow sur un site que j'ai ensuite exporté sur mon site wordpress mais le rendu n'est pas le même. Les images son affichées en ligne et non en carrousel.
De plus, en option je voudrais que la flèche gauche ne soit pas visible sur la première photo, de même que la flèche suivante sur la dernière photo.


<!DOCTYPE html>
<html>
<title>page test slides</title>
<meta name="cabinet" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>


<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>
</body>
</html>




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

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

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>


Si vous avez une solution s'il vous plait merci!

Voici les slides créés sur le site w3schools: https://www.w3schools.com/code/tryit.asp?filename=FZUU76085WOH, avec le rendu souhaité sans l'option
Sujet clos
Aller à