estoy creando un slider, pero en lugar de haber imagenes dentro hay un diseño hecho con `divs``
Esto es el HTML:
<div class="contenedor">
<div style="display:inline-block;">
<div class="col-12 animated zoomIn cuadroVendidos padcero" style="text-align: left;">
<div class="row">
<div class="col-5">
<div class="fotosPisos221">
<div id="overlay"></div>
<p class="sold">¡ VENDIDO !</p>
</div>
</div>
<div class="col-7" style="padding-left: 0px;">
<p class="persona">Maria <br><span class="persona2">vendio su piso en Paiporta</span></p>
<p class="vendido">Hemos vendido el piso en tan solo 3 semanas</p>
<div class="starTT">★★★★★</div>
<img src="images/perfiles/avatar1.jpg" alt="" class="avatar">
</div>
</div>
</div>
</div>
<div style="">
<div class="col-12 animated zoomIn cuadroVendidos padcero" style="text-align: left;">
<div class="row">
<div class="col-5">
<div class="fotosPisos221">
<div id="overlay"></div>
<p class="sold">¡ ALQUILADO !</p>
</div>
</div>
<div class="col-7" style="padding-left: 0px;">
<p class="persona">Maria <br><span class="persona2">vendio su piso en Paiporta</span></p>
<p class="vendido">Hemos vendido el piso en tan solo 3 semanas</p>
<div class="starTT">★★★★★</div>
<img src="images/perfiles/avatar1.jpg" alt="" class="avatar">
</div>
</div>
</div>
</div>
</div>
El CSS:
.contenedor{
max-width: 1000px;
margin: auto;
position: relative;
}
.contenedor div{
width: 100%;
display: none;
}
.contenedor img{
width: 100%;
height: auto;
}
button{
margin-top:30px;
border: none;
background: white;
}
button img{
height: 40px;
}
Y por último el JavaScript:
var proceso;
$(document).ready(function(){
var actualIndice = 0;
var objetos = $('.contenedor div');
var numObjetos = objetos.length;
function cambiarImagen(){
var imagen = objetos.eq(actualIndice);
objetos.hide();
imagen.css('display','inline-block');
}
proceso = setInterval(function(){
actualIndice += 1;
if(actualIndice > (numObjetos -1)){
actualIndice = 0;
}
cambiarImagen();
}, 3000);
$('.siguiente').click(function(){
limpiarIntervalo();
actualIndice += 1;
if (actualIndice > (numObjetos -1)){
actualIndice = 0;
}
cambiarImagen();
});
$('.anterior').click(function(){
limpiarIntervalo();
actualIndice -= 1;
if (actualIndice < 0 ){
actualIndice = numObjetos-1;
}
cambiarImagen();
});
});
function limpiarIntervalo(){
window.clearInterval(proceso);
}
El problema que veo es que me lee todos los contenedor div
y como en el css tambien, pues me lo pone todo en display:none
Alguna sugerencia?