¿Cómo muestro 3 publicaciones cada una en un carrusel de Bootstrap?

Question

¿Cómo muestro 3 publicaciones cada una en un carrusel de Bootstrap?

3 ene 2017, 18:51:55

Vistas: 13.5K

Votos: -1

Ejemplo de carrusel mostrando grupos de 3 publicaciones

El siguiente código muestra 3 publicaciones en una fila que está en la clase item active.. pero ¿cómo muestro otras publicaciones en la clase item del tipo de publicación personalizada para que el carrusel se deslice y muestre otros grupos de 3 publicaciones en una fila como en la imagen de arriba?

<?php
$args = array( 'post_type' => 'testimonial','numberposts' => 3 );
$lastposts = get_posts( $args );
$index = 0;?>

<div class="carousel-reviews broun-block">
<div class="container">
<div id="carousel-reviews" class="carousel slide testi" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<?php foreach($lastposts as $post) : setup_postdata($post); ++$index; ?>
            <div class="col-md-4 col-sm-6">
                <div class="block-text rel zmin">
                    <p><?php the_content();?></p>
                    <ins class="ab zmin sprite block"></ins>
                </div>
                <div class="person-text rel">
                    <a title="" href="#"><?php the_title();?></a>
                    <i><?php the_field('country');?></i>
                </div>
            </div>
<?php endforeach; ?>
            </div>

Usando while

<?php
$args = array('post_type' => 'testimonial',
    'posts_per_page' =>-1,
    'caller_get_posts'=> 3,
);
$the_query = new WP_Query($args);?>
<?php if ( $the_query->have_posts() ):?>
<?php  $j = 0; ?>
<div class="carousel-reviews broun-block">
<div class="container">
<div id="carousel-reviews" class="carousel slide testi" data-ride="carousel">

<div class="carousel-inner">
<?php while ($the_query->have_posts()):$the_query->the_post();?>
<?php if($j  == 0): ?>
<div class="item active">
            <div class="col-md-4 col-sm-6">
                <div class="block-text rel zmin">
                    <p><?php the_content();?></p>
                    <ins class="ab zmin sprite block"></ins>
                </div>
                <div class="person-text rel">
                    <a title="" href="#"><?php the_title();?></a>
                    <i><?php the_field('country');?></i>
                </div>
            </div>
        </div>
    <?php else: ?>
        <div class="item ">
            <div class="col-md-4 col-sm-6">
                <div class="block-text rel zmin">
                    <p><?php the_content();?>
                        <ins class="ab zmin sprite block"></ins>
                </div>
                <div class="person-text rel">
                    <a title="" href="#"><?php the_title();?></a>
                    <i><?php the_field('country');?></i>
                </div>
            </div>
        </div>
    <?php endif; ?>
    <?php $j++; ?>
<?php endwhile; endif; ?>
</div>
<a class="left carousel-control" href="#carousel-reviews" role="button" data-slide="prev">
    <span class="fa fa-arrow-circle-left"></span>
</a>
<a class="right carousel-control" href="#carousel-reviews" role="button" data-slide="next">
    <span class="fa fa-arrow-circle-right"></span>
</a>
</div>


</div>
</div>

dilip shrestha

16

loop

Comentarios

¿Tienes un ejemplo funcional sin WordPress? Esto parece ser un problema no relacionado con WordPress, sino más bien un problema con jQuery o el plugin de jQuery.

Howdy_McGee

3 ene 2017 20:16:50

el carrusel funciona perfectamente.. solo quiero recorrer 3 publicaciones en cada fila dentro del div con la clase item

dilip shrestha

3 ene 2017 21:42:26

Todas las respuestas a la pregunta

Comentarios

hola.. he intentado como dijiste.. pero la publicación aún muestra una en cada elemento del carrusel mientras que necesito tres publicaciones en cada fila con la clase item y que se deslice con la clase active

dilip shrestha

3 ene 2017 21:19:46

Te sugeriría que copies y pegues el código de ejemplo del carrusel de Bootstrap y te asegures de que funcione, y luego lo cambies poco a poco insertando tu código de publicaciones, verificando que funcione después de cada cambio.

iguanarama

3 ene 2017 21:22:23

he intentado usar el bucle while también.. he agregado el código en la pregunta de arriba.. también muestra solo una publicación a la vez.. agradecería si pudieras echar un vistazo y ayudar.. quiero mostrar tres publicaciones en un solo carrusel y así sucesivamente

dilip shrestha

3 ene 2017 21:27:44

iguanarama 421 · Answer 1 · 2017-01-03T20:22:53Z

Un div con class="item" se utiliza para cada diapositiva del carrusel. Pero en este momento tu bucle foreach está dentro de ese div, no fuera, por lo que todas tus publicaciones se están colocando en una sola diapositiva.

Así que simplemente cambia esa parte a:

<div class="carousel-inner">
    <?php foreach ($lastposts as $post) : setup_postdata ($post); ++$index; ?>
        <div class="item<?php if ($index == 1) { echo ' active'; } ?>">
            // Tu publicación va aquí
        </div> <!-- item -->
    <?php endforeach; ?>
</div> <!-- carousel-inner -->

Y finalmente, cambia tu consulta al principio para obtener tantas publicaciones como desees en el carrusel, por ejemplo 10:

$args = array( 'post_type' => 'testimonial','numberposts' => 10 );

iguanarama

421

3 ene 2017 20:22:53