Create a simple slider, but with content inside

Question

Create a simple slider, but with content inside

Navigation

#1 by (1 votes)

0

I'm creating a slider, but instead of having images inside there is a design made with 'divs''

This is the 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>

The 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;
}

And finally the 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);
}

The problem that I see is that it reads all the contenedor div and as in the css as well, since it puts everything in display:none Any suggestions?

javascript html css slider

asked by Miguel 07.11.2018 в 21:40

source

1 answer

Error passing data from ajax to php (Notice: Undefined index: id) Hibernate, exception when doing update

score 1 · Accepted Answer

The problem is that you are looking for all divs descendants of .container, but you only have to search for the direct children. Here I pass your modified code to work:

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>

Notice that I changed the var objetos = $('.contenedor div'); by var objetos = $('.contenedor > div'); to find only the direct children. With the CSS equal, hide all except the first child, with the selector .contenedor > div:not(:first-child) .

I hope it serves you.

Good luck!