How do I position my slideshow arrows correctly?

Question

I feel pretty silly not even being able to do something as simple as this, but I can't get the arrows on my slideshow correctly positioned. I don't want them to overlap the image, which, you can see in the attached picture, they do. When I tried editing the left / right parts of the arrow HTML, the arrows just got stuck in the middle on top of each other.

How would I edit the HTML to fix this issue?

<html>
<title>W3.CSS</title>

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"></link>
<style>
.mySlides {display:none}
</style>
<body>

</div>
<div class="w3-content" style="max-width: 771px;">

  <img class="mySlides" src="https://1.bp.blogspot.com/-M7Z6DU_4rr4/WH854ptAAnI/AAAAAAAAfxk/lT87QTRG-K8IV_KT0bp4rNOpdI2c2Z3xgCLcB/s1600/A.jpg" style="width: 771px;" />
  <img class="mySlides" src="https://2.bp.blogspot.com/-lTPS4BfZOJ8/WH855E_LSNI/AAAAAAAAfxo/bCIUdcdy0kkwKdMhs0_mLL1B2YFr6mTyACLcB/s1600/C.png" style="width: 771px;" />
  <img class="mySlides" src="https://3.bp.blogspot.com/-PftYrj2jw0Y/WH854U_odxI/AAAAAAAAfxg/lsFRmggzTE4R2FqO91-ydO_DzY7NRPB8ACLcB/s1600/D.jpg" style="width: 771px;" />
  <img class="mySlides" src="https://1.bp.blogspot.com/-q-mfkdFqElk/WH86yBXX2nI/AAAAAAAAfzo/GT8IOltOyho76hyksDTl89L9yJ2pfG0mwCLcB/s1600/Z30.jpg" style="width: 771px;" />


<a class="w3-btn-floating" onclick="plusDivs(-1)" style="position: absolute; left: 0; top: 45%;"><img src="https://1.bp.blogspot.com/-9TRFDOt59CI/Vz4EANpBSuI/AAAAAAAAdbY/wn8hFl3KfGAdq5jqeE1XZ00STJDBPaRoQCLcB/s1600/left.png" style="height: 22px; width: 16px;" /></a>
<a class="w3-btn-floating" onclick="plusDivs(1)" style="position: absolute; right: 0; top: 45%;"><img src="https://3.bp.blogspot.com/-0oFX79ip8cY/Vz4EAMYwacI/AAAAAAAAdbU/429-hZhCwhAEZOWn7bqVb1Ze7Ub0h-1FgCLcB/s1600/right.png" style="height: 22px; width: 16px;" /></a>

</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-border-red", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-border-black";
}
</script>

</body>
</html> 
</center>
</div>

there is no attached picture... – Ousmane D. Mar 10 '17 at 20:58 — Ousmane D., Mar 10 '17 at 20:58
Oh, blast, sorry about that! It's there now. – Leela Mar 10 '17 at 21:13 — Leela, Mar 10 '17 at 21:13

JRoss · Accepted Answer · 2017-03-10T22:09:13.997

HTML:

<div class="w3-content" style="max-width: 771px;">
    <img class="mySlides" src="https://1.bp.blogspot.com/-M7Z6DU_4rr4/WH854ptAAnI/AAAAAAAAfxk/lT87QTRG-K8IV_KT0bp4rNOpdI2c2Z3xgCLcB/s1600/A.jpg" style="width: 771px;" />
    <img class="mySlides" src="https://2.bp.blogspot.com/-lTPS4BfZOJ8/WH855E_LSNI/AAAAAAAAfxo/bCIUdcdy0kkwKdMhs0_mLL1B2YFr6mTyACLcB/s1600/C.png" style="width: 771px;" />
    <img class="mySlides" src="https://3.bp.blogspot.com/-PftYrj2jw0Y/WH854U_odxI/AAAAAAAAfxg/lsFRmggzTE4R2FqO91-ydO_DzY7NRPB8ACLcB/s1600/D.jpg" style="width: 771px;" />
    <img class="mySlides" src="https://1.bp.blogspot.com/-q-mfkdFqElk/WH86yBXX2nI/AAAAAAAAfzo/GT8IOltOyho76hyksDTl89L9yJ2pfG0mwCLcB/s1600/Z30.jpg" style="width: 771px;" />

    <a class="w3-btn-floating" id="prev" onclick="plusDivs(-1)"><img src="https://1.bp.blogspot.com/-9TRFDOt59CI/Vz4EANpBSuI/AAAAAAAAdbY/wn8hFl3KfGAdq5jqeE1XZ00STJDBPaRoQCLcB/s1600/left.png" /></a>
    <a class="w3-btn-floating" id="next" onclick="plusDivs(1)"><img src="https://3.bp.blogspot.com/-0oFX79ip8cY/Vz4EAMYwacI/AAAAAAAAdbU/429-hZhCwhAEZOWn7bqVb1Ze7Ub0h-1FgCLcB/s1600/right.png" /></a>
</div>

CSS:

.mySlides {
    display:none
}
.w3-content {
    max-width:calc(100% - 100px); //set max width to 100% - 100px for scalability
    width: 771px;
    position:relative;
}
.mySlides {
    max-width:100%;
}

//center the arrow image within the black circle background
.w3-btn-floating > img {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}

//First center the buttons vertically.
.w3-btn-floating {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

//Pull prev button all the all the way to the left by setting right 100% and add a little extra spacing with margin
#prev {
    margin-right:10px;
    right:100%;
}
//Push next button all the all the way to the right by setting left 100% and add a little extra spacing with margin
#next {
    margin-left:10px;
    left:100%;
}

And JS is the same:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-border-red", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-border-black";
}

On codepen: http://codepen.io/WebNesting/pen/QppXye

Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See [this Meta question and its answers](http://meta.stackoverflow.com/q/256359/215552) for more information. — Heretic Monkey, Mar 10 '17 at 21:57

How do I position my slideshow arrows correctly?

1 Answers1