People, I'm trying to put two img , one next and the other prev on the slide image of the Cycle plugin, but even with position: absloute; image of next as prev does not overlap the rest of the slide. They are shown as slide images which were not meant to happen. They need to be one on the left side and the other on the right side, fixed without disappearing.
In the plugin site there is an example, but this next and prev control is off the slide. I need them to overlap the slide.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OMG</title>
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/hover.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/banner.css">
<!-- JS -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function () {
$('._banner').cycle({ delay: 4000});
});
</script>
</head>
<body>
<div class="wrap clearfix">
<!-- Topo -->
<div class="top">
<!-- Menu -->
<div class="_menu clearfix">
<div class="logomarca">
ivan silva
</div>
<div class="menu">
<ul>
<li class="hvr-rectangle-out"><a href="">home</a></li>
<li class="hvr-rectangle-out"><a href="">trabalhos</a></li>
<li class="hvr-rectangle-out"><a href="">missão</a></li>
<li class="hvr-rectangle-out"><a href="">orçamento</a></li>
<li class="hvr-rectangle-out"><a href="">contatos</a></li>
<li class="hvr-rectangle-out"><a href="">sobre</a></li>
</ul>
</div>
</div>
<!-- Fim menu -->
<!-- Banner -->
<div class="_banner">
<img src="img/arrow_left.png" class="arrow_left">
<img src="img/arrow_right.png" class="arrow_right">
<img src="img/1.jpg">
<img src="img/2.jpg">
</div>
<!-- Fim banner -->
</div>
<!-- Fim topo -->
</div>
</body>
</html>
CSS
._banner{
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
/*...*/
background-color: white;
}
._banner > ul > li{
position: relative;
list-style: none;
display: inline-block;
width: 100%;
height: inherit;
}
._banner > ul > li > img{
position: relative;
width: 100%;
height: inherit;
}
.arrow_left{
position: absolute;
top: 3.0em;
left: 1.0em;
float: left;
}
.arrow_right{
position: absolute;
top: 3.0em;
left: 1.0em;
float: right;
}