Oślepłem nie widze co tu nie gra.
index
<div class="slide" id="reduta">
<div class="fake_menu"></div>
<div class="content">
<div class="container">
<div class="opis">
<div class="txt">
jh adhj hjdljah ladh da hj kadhj ladkjha djh adhj hjdljah ladh da hj kadhj ladkjha djh adhj hjdljah ladh da hj
</div>
</div>
<div class="galeria">
<div class="galeria_main cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-center-horz=true
data-cycle-center-vert=true
>
<img src="img/promenada.jpg"/>
<img src="img/reduta.jpg"/>
<img src="img/manufaktura.jpg"/>
<img src="img/glodzka.jpg"/>
<img src="img/arkadia.jpg"/>
</div>
<div id="prev"></div>
<div id="next"></div>
</div>
<div class="mapa">
<iframe src="" frameborder="0" style="border:0"></iframe>
</div>
</div>
<div class="navigation">
<div style="width:300px; height:20px; padding:0; margin:auto; display:table;">
<div id="opis"> Opis </div>
<div id="galeria"> Galeria </div>
<div id="mapa"> Mapa </div>
</div>
</div>
</div>
<div class="fake_right"></div>
</div>
css
html{
margin:0;
padding:0;
width:100%;
height:100%;
}
body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:scroll; //docelowo hidden
font-family:Arial;
}
div.slide{
width: 100%;
height: 100%;
overflow: hidden;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display:table;
}
div#reduta{
background-image:url('img/reduta.jpg');
}
div.fake_menu {
width:250px;
}
div.fake_right{
width:5%;
}
div.fake_menu, div.content, div.fake_right{
display:table-cell;
position:relative;
height:100%;
border:0px solid;
vertical-align:top;
}
div.container{
width:100%;
border:0px solid white;
height:90%;
overflow:hidden;
position:relative;
}
div.navigation{
width:100%;
border:0px solid;
height:10%;
text-align:center;
background-color:#4E8FFF;
opacity:0.9;
}
div.navigation div{
color:#ffffff;
text-decoration: none;
font-size:20px;
display:table-cell;
cursor:pointer;
}
div.opis{
background: rgba(78, 143, 255, 0.9);
border:1px solid #ffffff;
width:99%;
max-height:99%;
overflow-x:hidden;
margin:auto;
}
div.txt{
color:#ffffff;
font-size:17px;
padding:40px;
text-align:justify;
}
#reduta .galeria, #reduta .mapa{
display:none;
}
.galeria img{
max-width:100%;
max-height:100%;
}
div.navigation a.cycle-pager-active{
font-size:30px;
}
#reduta div.mapa{
width:100%;
height:100%;
}
#reduta div.galeria{
width:100%;
height:100%;
}
div.galeria_main{
position:relative;
}
div#prev, div#next{
position:absolute;
top:0;
background-color:#ffffff;
width:20%;
z-index:99999;
height:100%;
opacity:0;
}
div#next{
right:0;
background: url('next.png') no-repeat scroll 50% 50% transparent;
background-size: 80px 80px;
}
div#prev{
left:0;
background: url('prev.png') no-repeat scroll 50% 50% transparent;
background-size: 80px 80px;
}
div#prev:hover, div#next:hover{
opacity:0.7;
cursor:pointer;
}