0

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 divy como en el css tambien, pues me lo pone todo en display:none Alguna sugerencia?

1 respuesta 1

1

El problema es que estás buscando todos los divs descendientes de .contenedor, pero sólo tenés que buscar los hijos directos. Acá te paso tu código modificado para que funcione:

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);
}
.contenedor {
  max-width: 1000px;
  margin: auto;
  position: relative;
}

.contenedor>div:not(:first-child) {
  width: 100%;
  display: none;
}

.contenedor img {
  width: 100%;
  height: auto;
}

button {
  margin-top: 30px;
  border: none;
  background: white;
}

button img {
  height: 40px;
}
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

<body>
  <div class="contenedor">
    <div>
      <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="https://www.abc.es/media/play/2017/09/28/[email protected]" alt="" class="avatar">
          </div>
        </div>
      </div>
    </div>

    <div>
      <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="http://digitalspyuk.cdnds.net/16/03/980x490/landscape-1453464693-movies-avatar-still-02.jpg" alt="" class="avatar">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Fijate que cambié el var objetos = $('.contenedor div'); por var objetos = $('.contenedor > div'); para que encuentre sólo los hijos directos. Con el CSS igual, oculto todos excepto el primer hijo, con el selector .contenedor > div:not(:first-child).

Espero te sirva.

¡Suerte!

3
  • Perfercto! muchas gracias @Gustavo Cantero, perdona por tardar en contestar pero hasta hoy no puede probarlo, lo único es que cuando se pone en marcha hay uno que se ve más pequeño que el otro
    – Miguel
    Commented el 11 nov. 2018 a las 16:31
  • Me alegro que te sirva. Sobre el tamaño seguro es por las imágenes, ya que para el ejemplo tomé dos imágenes de Internet que seguramente tienen distinto tamaño. Commented el 11 nov. 2018 a las 16:35
  • Nada simplemente cambiado el inline-block por block ;)
    – Miguel
    Commented el 11 nov. 2018 a las 16:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.