如何向幻灯片添加箭头？

Question

嗨，我需要在幻灯片中添加两个箭头，以使用户可以在元素之间来回移动。小提琴：https://jsfiddle.net/piopio1/bs8ph705/#

<div>
<a href="url" target="_blank" class="white-title link">
    <div class="mySlides slide-a" style="background-color:#5b1985; height: 200px; margin: auto;  padding: 50px;  text-align: center!important;">
  <h1 class="white-title a" style="text-align: center">slide text!</h1>
    </div></a>

<a href="url" target="_blank" class="white-title link">
    <div class="mySlides slide-d" style="background-color:#199ED9; height: 200px; margin: auto;  padding: 50px;  text-align: center!important;">
    <h1 class="white-title a">slide text!</h1>
</div></a>

</div>

这里是脚本，我只是js的初学者，因此非常感谢您的帮助！

<script> 
var slideIndex = 0;
carousel();

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

Answer 1

您可以尝试这样的https://jsfiddle.net/fbLshu72/3/

   <div class="container">
  <a href="#" class="arrow left" onclick="carousel(1)"><</a>
  <a href="#" class="arrow right" onclick="carousel(1)">></a>
  <a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
    <div class="mySlides slide-auvik" style="background-color:#5b1985; height: 200px; margin: auto;  padding: 50px;  text-align: center!important;">
      <h1 class="white-title auvik" style="text-align: center">slide!</h1>
    </div>
  </a>

  <a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
    <div class="mySlides slide-datto" style="background-color:#199ED9; height: 200px; margin: auto;  padding: 50px;  text-align: center!important;">
      <h1 class="white-title auvik">slide!</h1>
    </div>
  </a>

</div>

Css：

.container{
  position: relative
}
.white-title {
  margin-top: 30px;
  margin-bottom: 30px;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  font-family: Lato, sans-serif;
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  text-align: center;
}

.white-title.fact {
  margin-bottom: 50px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  font-family: Raleway, sans-serif;
  color: #fff;
  font-size: 80px;
  font-weight: 100;
}

.white-title.auvik {
  font-style: italic;
  font-weight: 900;
}

.white-title.link {
  color: #ffffff;
  font-style: italic;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.white-title.link:hover {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.mySlides {
  display: none;
  padding: 100px;
  text-align: center;
  height: 250px;
}

.slide-datto,
.slide-datto-hover:hover {
  color: #fff !important;
  background-color: #199ED9 !important
}

.slide-auvik,
.slide-auvik-hover:hover {
  color: #fff !important;
  background-color: #5b1985 !important
}
.arrow{
  display: block;
  position: absolute;
  z-index: 2;
  text-decoration: none;
  top: calc(100%/2);
  font-size: 30px;
  color: black;
}
.arrow.left{

}
.arrow.right{
  right: 0;

}

JS：

var slideIndex = 0;
carousel();

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

Answer 2

添加两个以上的幻灯片时，上一个答案无法正常工作。

要修复它，您需要添加代码以正确地反转方向。我通过使用javascript调用解决了]

 <a href="#" class="arrow left" onclick="carousel(-1)"></a>

而不是

<a href="#" class="arrow left" onclick="carousel(1)"></a>

用于左指示器。

我还添加了逻辑以检查方向是否相反，并且当前幻灯片是幻灯片1（要求幻灯片索引以反映最后一张幻灯片。

  if (slideIndex > x.length) {
    slideIndex = 1
  } else if (inc == -1 && slideIndex < 1) {
    slideIndex = x.length;
  }

关于您的原始问题（如何添加箭头以及在何处放置箭头代码）：

使用位置“绝对”以及顶部计算器：calc（100％2），您可以确定转盘垂直中途点在哪里。

向右0（带有.arrow.right）使向右箭头停留在轮播的右侧（0表示最右边）。 Z-index指示它应该在圆盘传送带（第二层）之上。

.arrow{
  display: block;
  position: absolute;
  z-index: 2;
  text-decoration: none;
  top: calc(100%/2);
  font-size: 30px;
  color: black;
}
.arrow.right{
  right: 0;
}

var slideIndex = 0;
carousel(1);

function carousel(inc = 1) {

  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex += inc;

  if (slideIndex > x.length) {
    slideIndex = 1
  } else if (inc == -1 && slideIndex < 1) {
    slideIndex = x.length;
  }
  x[slideIndex - 1].style.display = "block";

}

    .container{
       position: relative
    }
    .white-title {
      margin-top: 30px;
      margin-bottom: 30px;
      -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
      font-family: Lato, sans-serif;
      color: #fff;
      font-size: 40px;
      font-weight: 300;
      text-align: center;
    }

.white-title.fact {
  margin-bottom: 50px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  font-family: Raleway, sans-serif;
  color: #fff;
  font-size: 80px;
  font-weight: 100;
}

.white-title.auvik {
  font-style: italic;
  font-weight: 900;
}

.white-title.link {
  color: #ffffff;
  font-style: italic;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.white-title.link:hover {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.mySlides {
  display: none;
  padding: 100px;
  text-align: center;
  height: 250px;
}

.slide-datto,
.slide-datto-hover:hover {
  color: #fff !important;
  background-color: blue !important
}

.slide-auvik,
.slide-auvik-hover:hover {
  color: #fff !important;
  background-color: yellow !important
}
.arrow{
  display: block;
  position: absolute;
  z-index: 2;
  text-decoration: none;
  top: calc(100%/2);
  font-size: 30px;
  color: black;
}
.arrow.left{
  
}
.arrow.right{
  right: 0;
  
}

<div class="container">
  <a href="#" class="arrow left" onclick="carousel(-1)"></a>
  <a href="#" class="arrow right" onclick="carousel(1)"></a>
  <a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
    <div class="mySlides slide-auvik" style="background-color:yellow; height: 200px; margin: auto;  padding: 50px;  text-align: center!important;">
      <h1 class="white-title auvik" style="text-align: center">slide!</h1>
    </div>
  </a>

  <a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
    <div class="mySlides slide-datto" style="background-color:blue; height: 200px; margin: auto;  padding: 50px;  text-align: center!important;">
      <h1 class="white-title auvik">slide!</h1>
    </div>
  </a>
  <a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
    <div class="mySlides slide-third" style="background-color:green; height: 200px; margin: auto;  padding: 50px;  text-align: center!important;">
      <h1 class="white-title auvik">slide!</h1>
    </div>
  </a>
</div>