0

Necesito poder colocar cuatro cards visibles y poder ir moviendo como slider para publicación más antiguas, pero no logro hacerlo funcionar. ¿Alguna sugerencia o que vean que me falta o está mal?

*En este caso, me aparecen los cuatro cards pero uno en cada columna, no los cuatro en una y a su vez los slider están pero no funcionan.

    <div class="propiedades-destacadas">
    <?php
      $args = array( 'post_type' => 'propiedades','numberposts' => 4 );
      $lastposts = get_posts( $args );
      $index = 0;?>
    <div class="container">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <?php foreach ($lastposts as $post) : setup_postdata ($post); ++$index; ?>
            <div class="item <?php if ($index == 1) { echo ' active'; } ?>">
                <div class="col-3">
                  <div class="card">
                    <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>"><h5 class="card-title"><?php the_title() ?></h5></a>
                      <p id="precios">$<?php the_field( 'precio' ); ?> <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"><?php the_field( 'dormitorios' ); ?> Dorm. / <?php the_field( 'banos' ); ?> Baños / <?php the_field( 'metros_cuadrados' ); ?> Mts2</p>
                    </div>
                  </div>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div> 
    </div>   
  </div>

2 respuestas 2

0

Al no tener el código php no he podido recrear lo que buscas tal cual, pero te pongo todo el código para que veas el funcionamiento.

Por el problema de que te aparecen los cards en diferentes columnas es porque se te ha olvidado añadir un div con la clase row para que pudiera coger toda la columna.

Por otro lado la clase item está mal usada, el nombre de la clase es carousel-item y esta era una de las razones por la que no te funcionara.

Y he añadido algo de css para que los botones de previo y siguiente se vean.

Este es el resulado:

.carousel-control-next, .carousel-control-prev {
  background-color: black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="propiedades-destacadas">
    <div class="container">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="row">
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
              </div>
            </div>

            <div class="carousel-item">
              <div class="row">
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada 2</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada 2</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada 2</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada 2</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
               </div>
             </div>
          </div>

          <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div> 
    </div>   
  </div>

0

Al utilizar el carousel-item si pude solucionar el problema que se veían las cuatro hacia abajo, ahora sólo se ve una 'activa', sin embargo no puedo mostrar cuatro y poder ir moviendo con el código php. Más Row no agrego ya que con el código php queda mal posicionado en la página.

.carousel-control-next, .carousel-control-prev {
  background-color: black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="propiedades-destacadas">
    <div class="container">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="row">
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
              </div>
            </div>

            <div class="carousel-item">
              <div class="row">
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada 2</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada 2</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada 2</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
                
                <div class="col-3">
                  <div class="card">
                  
                    <h3>Destacada 2</h3>
                    <div class="card-body">
                      <a href="<?php the_permalink() ?>">
                      <h5 class="card-title"></h5></a>
                      <p id="precios">$ <span id="derecha" > UF 1.120</span></p>
                      <p id="datos"> Baños /  Mts2</p>
                    </div>
                    
                  </div>
                </div>
               </div>
             </div>
          </div>

          <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div> 
    </div>   
  </div>

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.