Come mostrare 3 post in un carousel Bootstrap?

3 gen 2017, 18:51:55
Visualizzazioni: 13.5K
Voti: -1

Anteprima carousel Bootstrap con 3 post per slide

Il seguente codice mostra 3 post in una riga nella classe item active.. ma come posso visualizzare altri post nel custom post type con classe item per far scorrere il carousel e mostrare altri 3 post per riga come nell'immagine sopra..

<?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>

Utilizzando 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>
2
Commenti

Hai un esempio funzionante senza WordPress? Sembra più un problema legato a jQuery/jQuery Plugin che a WordPress.

Howdy_McGee Howdy_McGee
3 gen 2017 20:16:50

il carousel funziona perfettamente.. voglio solo scorrere 3 post ciascuno in una riga div con classe item

dilip shrestha dilip shrestha
3 gen 2017 21:42:26
Tutte le risposte alla domanda 1
3

Un div con class="item" viene utilizzato per ogni slide del carosello. Ma al momento il tuo ciclo foreach si trova all'interno di quel div, non all'esterno, quindi tutti i tuoi post finiranno in un'unica slide.

Quindi modifica semplicemente quella parte in questo modo:

<div class="carousel-inner">
    <?php foreach ($lastposts as $post) : setup_postdata ($post); ++$index; ?>
        <div class="item<?php if ($index == 1) { echo ' active'; } ?>">
            // Il tuo post va qui
        </div> <!-- item -->
    <?php endforeach; ?>
</div> <!-- carousel-inner -->

Infine, modifica la tua query in alto per ottenere il numero di post che desideri nel carosello, ad esempio 10:

$args = array( 'post_type' => 'testimonial','numberposts' => 10 );
3 gen 2017 20:22:53
Commenti

ciao.. ho provato come hai detto.. ma il post continua a mostrare un elemento per volta nel carosello mentre io ho bisogno di tre post per riga con la classe item che scorrono con la classe active

dilip shrestha dilip shrestha
3 gen 2017 21:19:46

Ti suggerirei di copiare e incollare il codice di esempio del carosello Bootstrap e assicurarti che funzioni, per poi modificarlo gradualmente inserendo il tuo codice dei post, verificando che funzioni dopo ogni modifica.

iguanarama iguanarama
3 gen 2017 21:22:23

ho provato anche usando il ciclo while.. ho aggiunto il codice nella domanda sopra.. mostra comunque solo un post alla volta.. apprezzerei se potessi dare un'occhiata e aiutarmi.. voglio mostrare tre post in un singolo carosello e così via

dilip shrestha dilip shrestha
3 gen 2017 21:27:44