title: Disable prev/next arrows on first and last slides
body: <p>I'm a beginner to create a website.
  I need help for my slides created on a website. I copied and pasted the code on my website but my slides are displayed differently (displayed like column ) 
  Moreover, I'd like to disable the prev arrow on the first slide and the next arrow on the last slide.
  <a href="https://www.w3schools.com/code/tryit.asp?filename=FZUU76085WOH" rel="nofollow noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FZUU76085WOH</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var slideIndex = 1;
  showDivs(slideIndex);
  
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }
  
  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n &gt; x.length) {
      slideIndex = 1
    }
    if (n &lt; 1) {
      slideIndex = x.length
    }
    for (i = 0; i &lt; x.length; i++) {
      x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mySlides {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  &lt;div class="w3-content w3-display-container"&gt;
    &lt;img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%"&gt;
    &lt;img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%"&gt;
    &lt;img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%"&gt;
    &lt;img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%"&gt;
  
    &lt;button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"&gt;&amp;#10094;&lt;/button&gt;
    &lt;button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"&gt;&amp;#10095;&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Tanks for your help</p>