put arrows left and right of an element - html

Question

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

Answer 1

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>