在第一张和最后一张幻灯片上禁用上一个/下一个箭头

Question

我是创建网站的初学者。 我在网站上创建的幻灯片需要帮助。我在我的网站上复制并粘贴了代码，但我的幻灯片显示方式不同（显示为 column ） 此外，我想禁用第一张幻灯片上的上一个箭头和最后一张幻灯片上的下一个箭头。 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>

坦克为您提供帮助

Answer 1

您需要检查slideIndex += n 值（通过单击箭头按钮）是否与您拥有的幻灯片数量相同，如果是，则禁用下一个按钮，因为没有更多幻灯片。

上一张幻灯片的逻辑也相同。如果索引是您开始的位置，则禁用上一个按钮。

这是一个例子：

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 2

只要 n > x.length 或 n

Answer 3

我根据网站上的示例创建了另一个滑块：

enter link description here

我想在我的 wordpress 上获得完全相同的滑块，当我在我的网站上通过代码时购买我有代码 sn-p 的结果:( 请你看看这个（如果可能的话，试着检查一下）。我试了几天没有成功

谢谢

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