1
Guys, I’m trying to put two img, one next and the other Prev on the slide image of the plugin Cycle, but even with position: absloute; both the image of next as that of Prev do not overlap the rest of the slide. They are shown as slide images which was not meant to happen. They need to be one on the left and the other on the right, fixed without disappearing.
On the site the plugin has an example, but this control of next and Prev stay off the slide. I need you to override 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;
}
Add your code to the question Mike, so we can help you.
– Samir Braga
@Samirbraga code posted
– Mike
The plugin you are referring to is this- > https://github.com/malsup/cycle ?
– Sergio
@Sergio is the one
– Mike
Mike, have you tried using the "z-index" property on these images?
– DiChrist