How to add arrows to slideshow?

Question

Hi I need to add two arrows to my slideshow to let users move forward and backward through the elements. Fiddle: 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>

Here's the script, I'm only a beginner with js so any help is greatly appreciated!

<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

You can try something like this 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

For what it is worth, the code you have does not work properly when more than two slides are added.

To fix it, you need to add the code to reverse the direction properly. I forked the previous solution, and solved that by using the javascript call

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

instead of

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

for the left indicator.

I also added logic to check if the direction is reverse and the current slide is Slide 1 (requiring the slide index to reflect the last slide).

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

In regards to your original question (how to add the arrows and where to put the code for the arrows):

As shown in the CSS of the previous answer, the position "absolute" as well as the calculator of top: calc(100%2) allows you to determine where the vertical half way point is for the carousel.

Right 0 (with.arrow.right) makes the right arrow stay at the right side of the carousel (0 meaning far right). Z-index indicates that it should be above the carousel (second layer).

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