Disable prev/next arrows on first and last slides

Question

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. https://www.w3schools.com/code/tryit.asp?filename=FZUU76085WOH

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";
}

.mySlides {
  display: none;
}

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

Tanks for your help

Answer 1

I have created another slider based on an example on a website:

enter link description here

I would like to get exactly the same slider on my wordpress, buy when I past the code on my website I have the result of code snippet :( May you please take a look at this (if possible try it to check it). I tried for several days without success

Thanks

$switch-speed: 1s;
$slider-number: 5;
$slider-width: 100% / $slider-number;

$image1: 'https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg';
$image2: 'https://meshrepsy.fr/wp-content/uploads/Entrée.jpg';
$image3: 'https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg';
$image4: 'https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg';
$image5: 'https://meshrepsy.fr/wp-content/uploads/Cure-type.jpg';

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #1C2325;
  color: #eee;
}

.outer-wrapper {
  width: 80%;
  margin: 50px auto;
}

// basic styles
.s-wrap {
  width: 100%;
  margin-bottom: 50px;
  padding-bottom: 55%;
  position: relative;
  border: 2px solid #fff;
  background-color: #efefe8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;

  > input {
    display: none;
  }

  .s-content {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% * $slider-number;
    height: 100%;
    font-size: 0;
    list-style: none;
    transition: transform $switch-speed;
  }

  .s-item {
    display: inline-block;
    width: $slider-width;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .s-item-1 {background-image: url($image1);}
  .s-item-2 {background-image: url($image2);}
  .s-item-3 {background-image: url($image3);}
  .s-item-4 {background-image: url($image4);}
  .s-item-5 {background-image: url($image5);}
}

.s-type-1 {
  .s-control {
    position: absolute;
    bottom: 18px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    transition-timing-function: ease-out;

    > label[class^="s-c-"] {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      border: 1px solid #999;
      background-color: #efefe8;
      cursor: pointer;
    }
  }

  .s-nav label {
    display: none;
    position: absolute;
    top: 50%;
    padding: 5px 10px;
    transform: translateY(-50%);
    cursor: pointer;

    &::before,
    &::after {
      content: "";
      display: block;
      width: 8px;
      height: 24px;
      background-color: #fff;
    }

    &::before {margin-bottom: -12px;}

    &.left {
      left: 20px;

      &::before {transform: rotate(45deg);}

      &::after {transform: rotate(-45deg);}
    }

    &.right {
      right: 20px;

      &::before {transform: rotate(-45deg);}

      &::after {transform: rotate(45deg);}
    }
  }

  @for $i from 1 through $slider-number {
    #s-#{$i}:checked {
      & ~ .s-content {transform: translateX(-$slider-width * ($i - 1));}

      & ~ .s-control .s-c-#{$i} {background-color: #333;}

      & ~ .s-nav .s-nav-#{$i} {display: block;}
    }
  }
}

.s-type-2 {
  .s-content {
    animation: slider-animation 50s ease-in-out infinite;

    &:hover {animation-play-state: paused;}
  }
}

@keyframes slider-animation {
  $i: 0;
  $j: 0;
  $times: ($slider-number - 1) * 2;
  @while $i < 100 {
    #{$i}%,
    #{$i + 7}% {
      @if $i < 50 {
        transform: translateX(-$slider-width * $j);
          } @else {
            transform: translateX(-$slider-width * ($times - $j));
              }
    }

    $i: $i + 100 / $times;
    $j: $j + 1;
  }
}

<div class="outer-wrapper">
   <div class="s-wrap s-type-1" role="slider">
    <input type="radio" id="s-1" name="slider-control" checked="checked">
    <input type="radio" id="s-2" name="slider-control">
    <input type="radio" id="s-3" name="slider-control">
    <input type="radio" id="s-4" name="slider-control">
    <input type="radio" id="s-5" name="slider-control">
    <ul class="s-content">
      <li class="s-item s-item-1"></li>
      <li class="s-item s-item-2"></li>
      <li class="s-item s-item-3"></li>
      <li class="s-item s-item-4"></li>
      <li class="s-item s-item-5"></li>
    </ul>
   <div class="s-nav">
      <label class="s-nav-1 right" for="s-2"></label>
      <label class="s-nav-2 left" for="s-1"></label>
      <label class="s-nav-2 right" for="s-3"></label>
      <label class="s-nav-3 left" for="s-2"></label>
      <label class="s-nav-3 right" for="s-4"></label>
      <label class="s-nav-4 left" for="s-3"></label>
      <label class="s-nav-4 right" for="s-5"></label>
      <label class="s-nav-5 left" for="s-4"></label>
    </div>
  </div>

  

Answer 2

You need to check if the slideIndex += n value (from clicking the arrow buttons) is the same as the amount of slides you have, if so then disable the next button because there are no more slides.

Also the same logic for the previous slide. If the index is where you started, then disable the previous button.

Here's an example:

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";
}

function handleDisabled(newIndex) {
  prevBtn.disabled = false;
  nextBtn.disabled = false;

  if (newIndex === slides.length) {
    nextBtn.disabled = true;
  } else if (newIndex === 1) {
    prevBtn.disabled = true;
  }
}

.mySlides {
  display: none;
}

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

Answer 3

Just make it so if n > x.length or n < x.length the display property of the button be set to "none".