Place arrow keys to change over the carousel

Asked

Viewed 186 times

0

Good,

I needed to put the arrows on my carousel that are meant to change the image over the carousel this way:

inserir a descrição da imagem aqui

I already used the z-index and tried to change the display but it is not on top of the image.

Here comes my code:

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;
    width: 100%;
}

.botao {
    z-index: 2;
    position: inherit;
    display: 
}

.slideshow {
    z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<title>Rio Lis</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" type="text/css" href="./normalize.css">
</head>
<body>

    <div class="slideshow">
      <img class="mySlides" src="./imagens/1014033.jpg">
      <img class="mySlides" src="./imagens/thumb-1920-1000923.jpg">
      <img class="mySlides" src="./imagens/thumb-1920-926492.jpg">
    
      <button class="botaoesquerda botao" onclick="plusDivs(-1)">&#10094;</button>
      <button class="botaodireira botao" onclick="plusDivs(1)">&#10095;</button>
    </div>
    
    <script src="/scripts.js"></script>

</body>
</html>

javascript html css

2 answers

2


Guy one option is to put position:relative in the container of slider and use position:absolute in btns to be able to align with top/left/right

inserir a descrição da imagem aqui

See the result

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;
  width: 100%;
}

.botao {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
}

.botaodireira {
  left: auto;
  right: 30px;
}

.slideshow {
  /* z-index: -1; */
  position: relative;
}
<div class="slideshow">
  <img class="mySlides" src="https://www.placecage.com/600/100">
  <img class="mySlides" src="https://www.placecage.com/600/100">
  <img class="mySlides" src="https://www.placecage.com/600/100">

  <button class="botaoesquerda botao" onclick="plusDivs(-1)">&#10094;</button>
  <button class="botaodireira botao" onclick="plusDivs(1)">&#10095;</button>
</div>

OBS: if you put z-index:-1 in the container of slider you won’t be able to click the buttons that are inside this container. I didn’t really see the need to use that z-index:-1 so I left it in the CSS

0

All elements are either "positioned" or "static". Positioned are all that have position: relative, absolute etc (any position except static). Elements without a declared position or with position: static will be static and will follow the page flow.

Knowing this, realize that positioned items will always be "in front" of static items. The z-index aims at only sort positioned items. It serves nothing for static items.

In your case, the buttons inherited the static position of the slideshow, and therefore were pushed down, following the page flow. The simplest way to deal with it is to give them position: absolute, and don’t forget to give the slideshow position: relative for anchoring.

Understanding positioning is vital for a web developer, so, be sure to read about it.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.