I’m making a image slider with thumbnails and one of my cursors is overlapping my image, it’s the one of the left the previous cursor, and I don’t know how to fix it. Any advice? Here is the code and photo if that helps.
<style type="text/css">
* {padding:0; margin:0;}
img {max-width: 100%; display; block;}
.cycle-slideshow {
width:100%;
max-width: 960px;
display: block;
position: relative;
margin: 20px auto;
}
.cycle-prev, .cycle-next {
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 45%;
z-index: 99999;
cursor: pointer;
text-align: center;
color: #ffffff;
font-size: 200%;
}
.cycle-previous {left:10%;}
.cycle-next {right: 10%;}
/* Thumbnails Styling */
.cycle-pager {
width: 100%;
text-align: center;
display: inline block;
position: absolute;
bottom: 0;
z-index: 99999;
cursor: pointer;
}
.cycle-pager a {
display: inline-block;
margin: 0 5px;
opacity: .5;
border: 2px solid rgba(255,255,255,0.30);
}
.cycle-pager .cycle-pager-active { opacity: 1; border: 2px solid rgba(255,255,255,0.70);}
.cycle-pager .thumb {
width: 10%;
}
.thumb {display: block;}
</style>