Как добавить стрелки в слайд-шоу?

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

Для чего бы то ни было, ваш код не работает должным образом, когда добавлено более двух слайдов.

Чтобы исправить это, вам нужно добавить код, чтобы правильно изменить направление. Я разветвил предыдущее решение и решил, что с помощью javascript вызова

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

вместо

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

для левого индикатора.

Я также добавил logi c, чтобы проверить, является ли направление обратным, и текущий слайд - Слайд 1 (требующий, чтобы индекс слайда отражал последний слайд).

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

Относительно вашего исходного вопроса (как добавить стрелки и где поставить код для стрелок):

Как показано в CSS предыдущего ответа, позиция «абсолютная», а также калькулятор сверху: cal c (100% 2) позволяет определить, где находится вертикальная половина пути для карусели.

Right 0 (с .arrow.right) заставляет стрелку вправо оставаться с правой стороны карусели (0 означает крайний правый угол) , Z-индекс указывает, что он должен быть выше карусели (второй слой).

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

Answer 2

Вы можете попробовать что-то вроде этого https://jsfiddle.net/fbLshu72/3/

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