Hasta ahora todo normal (usando imagenes a pantalla completa, cambíe section por divs, etc.
El problema esta en que colo un botón centrado en el bottom de cada slide pero solo aparece el primero. Uso la misma clase para que aparezca igual en todos los slides pero simplemente no carga.
coloco el html y el css a ver si alguien entiende que sucede.
El boton que no vuelve a aparecer es <a class="button" id="boton-1"></a>, clase :button, (el id lo voy a utilizar para llamar una animación de css)
gracias por su tiempo
Código :
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/UQABudeX/1/edit
-->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css">
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="logo">
<img src="images/logo.png">
</div> <!--end logo-->
<ul id="nav">
<li><a href="#slide1" data slide = "b1" title="Next Section"><img src="images/dot.png" alt="Link" id="uno"/></a></li>
<li><a href="#slide2" data slide = "b2" title="Next Section"><img src="images/dot.png" alt="Link" id="dos"/> </a></li>
<li><a href="#slide3" data slide = "b3" title="Next Section"><img src="images/dot.png" alt="Link" id="tres"/></a></li>
<li><a href="#slide4" data slide = "b4" title="Next Section"><img src="images/dot.png" alt="Link" id="cuatro"/></a></li>
<li><a href="#slide5" data slide = "b5" title="Next Section"><img src="images/dot.png" alt="Link" id="cinco"/></a></li>
<li><a href="#slide6" data slide = "b6" title="Next Section"><img src="images/dot.png" alt="Link" id="seis"/></a></li>
<!-- <li><a href="#sexto" title="Next Section"><img src="images/dot.png" alt="Link" id="perras" /></a></li>
<li><a href="#siete" title="Next Section"><img src="images/dot.png" alt="Link" id="slideup2" /></a></li>-->
</ul>
<!-- <a class="to-top">Ir Arriba</a>-->
<ul id="nav2">
<li><a href="#fb" title="Next Section"><img src="images/fb.png" alt="Link" id="puta"/></a></li>
<li><a href="#yt" title="Next Section"><img src="images/youtube.png" alt="Link" /></a></li>
<li><a href="#instagram" title="Next Section"><img src="images/instagram.png" alt="Link" /></a></li>
<li><a href="#pinterest" title="Next Section"><img src="images/pinterest.png" alt="Link" /></a></li>
</ul>
<div id="slide1">
<a class="button" id="boton-1"></a>
</div>
<div id="slide2">
<a class="button" id="boton-2"></a>
</div>
<div id="slide3">
</div>
<div id="slide4">
</div>
<div id="slide5">
</div>
<div id="slide6">
</div>
<script>
$("a").on("click",function(){
if(this.hash){
//console.log($(this).attr('href'));
$("html body").animate({"scrollTop":$($(this).attr('href')).offset().top-0},1400);
return false;
}
});
$(document).ready(function(){
var $win = window;
var $pos = 40;
$(window).scroll(function(){
if($(this).scrollTop() > $pos){
$("a.to-top").css("opacity","1");
$("header").css("box-shadow","2px 5px 20px rgb(14,62,146,0.5)");
}else{
$("a.to-top").css("opacity","0");
$("header").css("box-shadow","1px 2px 1px transparent");
}
})
});
$(".to-top").on("click",function(){
$("html, body").animate({scrollTop:0},"slow");
});
</script>
</body>
</html>
CSS
Código :
html,body{
font-family: 'BebasRegular';
width:100%;
height:100%;
margin: 0;
padding: 0;
}
#nav{
list-style: none;
position: fixed;
margin-top: 20px;
left: 180px;
z-index: 1000;
}
#nav li{
margin: 0 0 15px 0;
}
#nav2{
list-style: none;
position: fixed;
margin-top: 20px;
right: 20px;
z-index: 1000;
}
.logo{
background: none repeat scroll 0 0 rgba(255,255,255, 0.45);
width: 150px;
height: 250px;
position: fixed;
float: left;
margin-left: 50px;
z-index: 1000;
}
.logo img {
width: 120px;
height: 120px;
margin-top: 110px;
margin-left:10px;
}
.button{
display:block;
width:79px;
height:36px;
position:absolute;
bottom:0px;
left:50%;
z-index: 1000;
background-image:url(images/flechita.png);
}
.button:hover{
cursor:pointer;
}
#slide2 .button{
display:block;
width:79px;
height:36px;
position:absolute;
bottom:0px;
left:50%;
z-index: 1000;
background-image:url(images/flechita.png);
}
#slide2 .button:hover{
cursor:pointer;
}
/******************************
SLIDE 1
*******************************/
#slide1{
background-image:url(images/01.jpg);
background-size: cover;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
/******************************
SLIDE 2
*******************************/
#slide2{
background-image:url(images/02.jpg);
background-size: cover;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
/******************************
SLIDE 3
*******************************/
#slide3{
background-image:url(images/03.jpg);
background-size: cover;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
/******************************
SLIDE 4
*******************************/
#slide4{
background-image:url(images/04.jpg);
background-size: cover;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
/******************************
SLIDE 5
*******************************/
#slide5{
background-image:url(images/05.jpg);
background-size: cover;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
/******************************
SLIDE 6
*******************************/
#slide6{
background-image:url(images/06.jpg);
background-size: cover;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
