CODEWITHSUNDEEP
htmlcss
asbarabungi
asbarabungi

Reputation: 37

put arrows left and right of an element

I have an icon in the center and two arrows on the right and left to scroll through the icons present. I would like the arrows on the sides of the icon to be positioned horizontally in the center of the icon itself. How can I do? In this way the arrows are located at the top right and left and the icon displays it in the center but lower.

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";  
}
.increase {
  float: right;
  cursor: pointer;
}

.decrease  {
  float:left;
  margin: 0px 15px 15px 0px;
  cursor: pointer;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

#contenitore {
  width: 60%;
  background-color: blue;
}
  img {
    max-width: 100%;
    height: auto;
  }
      
  
  img:hover {
    width: 310px;
    height: auto;
  }

  .mySlides {
    display:flex;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: auto;
    top:250px;
    left:0;
    right:0;
    bottom:0;
    position: absolute;
  
  }
<!-- Icons fontAwesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

<header class="ricerca">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 align-self-center">

        <span class="decrease" onclick="plusDivs(-1)" value="Decrease Value"><i class="fas fa-chevron-circle-left" style="font-size:50px;"></i></span>


        <div class="w3-tooltip">
        <img class="mySlides" shadow-lg p-3 mb-5 src="https://image.flaticon.com/icons/png/512/945/945170.png" &nbsp;";>
        </div>

        


        <span class="increase" onclick="plusDivs(1)" value="Increase Value"><i class="fas fa-chevron-circle-right" style="font-size:50px;"></i></span>
      </div>
    </div>
  </div>
</header>

Upvotes: 1

Views: 1310

Answers (1)

Y.T.
Y.T.

Reputation: 2768

In your case I don't think that styling with position: abosolute on the icon would be a wise idea. I changed it to be a flex child of .icon-container. You can see if it helps.

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";  
}
.increase {
  float: right;
  cursor: pointer;
}

.decrease  {
  float:left;
  margin: 0px 15px 15px 0px;
  cursor: pointer;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

#contenitore {
  width: 60%;
  background-color: blue;
}
img {
  max-width: 100%;
  height: auto;
}

img:hover {
  width: 310px;
  height: auto;
}
.icon-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mySlides {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin: auto
}
<!-- Icons fontAwesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

<header class="ricerca">
  <div class="container">
    <div class="row">
      <div class="icon-container col-sm-12 align-self-center">

        <span class="decrease" onclick="plusDivs(-1)" value="Decrease Value"><i class="fas fa-chevron-circle-left" style="font-size:50px;"></i></span>


        <div class="w3-tooltip">
        <img class="mySlides shadow-lg p-3 mb-5" src="https://image.flaticon.com/icons/png/512/945/945170.png">
        </div>

        


        <span class="increase" onclick="plusDivs(1)" value="Increase Value"><i class="fas fa-chevron-circle-right" style="font-size:50px;"></i></span>
      </div>
    </div>
  </div>
</header>

Upvotes: 1

Related Questions