28172 sujets

CSS et mise en forme, CSS3

Besoin d'aide pour mes slides, urgent!

Bonjour,

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 le lien sur ma page créée: https://meshrepsy.fr/page-test

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
Hello,

J'ai visité ton site:
https://meshrepsy.fr/page-test/

J'ai ouvert la console et une erreur s'affiche:

SyntaxError: expected expression, got '< (sûrment une erreur côté JS)

J'ai aussi inspecté le code source de la page et au beau milieu, je vois un <DOCTYPE html> et une balise <html> ouverte.

Penche toi sur ces 2 problèmes pour commencer
Pardon j'ai eu un souci de connexion.
j'ai apporté quelques modifs mais le résultat n'estr tjrs pas celui recherché.
Voici les nouveaux codes:
<script>
var slides = document.getElementsByClassName("mySlides");
var nextBtn = document.getElementById("nextBtn");
var prevBtn = document.getElementById("prevBtn");

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {
  var newIndex = slideIndex += n;

  handleDisabled(newIndex);

  showDivs(newIndex);
}

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




<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<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 id="prevBtn" disabled class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button id="nextBtn" class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>


Merci Smiley smile
Sujet clos
Aller à