Cum afișez câte 3 postări într-un carusel Bootstrap?

3 ian. 2017, 18:51:55
Vizualizări: 13.5K
Voturi: -1

exemplu carusel cu postări

Următorul cod afișează 3 postări pe un rând în clasa item active.. dar cum pot afișa alte postări din tipul custom de postări în clasa item, astfel încât caruselul să deruleze pentru a afișa alte grupuri de câte 3 postări pe rând, ca în imaginea de mai sus..

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

Folosind 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
Comentarii

Ai un exemplu funcțional fără WordPress? Sună ca o problemă care nu ține de WordPress, ci de jQuery / jQuery Plugin.

Howdy_McGee Howdy_McGee
3 ian. 2017 20:16:50

caruselul funcționează perfect.. doar vreau să parcurg 3 articole, fiecare în div-ul cu clasa item

dilip shrestha dilip shrestha
3 ian. 2017 21:42:26
Toate răspunsurile la întrebare 1
3

Un div cu class="item" este folosit pentru fiecare slide al caruselului. Însă acum bucla ta foreach se află în interiorul acelui div, nu în afara lui, așa că toate postările tale se vor afla într-un singur slide.

Așadar, schimbă acea parte în:

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

Și în final, modifică interogarea de la început pentru a obține câte postări dorești în carusel, de exemplu 10:

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

salut.. am încercat cum ai spus..dar postarea încă afișează câte unul pe rând în carusel, în timp ce eu am nevoie de trei postări pe rând cu clasa item și să alunece cu clasa active

dilip shrestha dilip shrestha
3 ian. 2017 21:19:46

Aș sugera să copiezi și să lipesc codul exemplu de carusel Bootstrap și să te asiguri că funcționează, apoi să-l modifici treptat introducând codul tău pentru postări, verificând să funcționeze după fiecare modificare.

iguanarama iguanarama
3 ian. 2017 21:22:23

am încercat și cu bucla while.. am adăugat codul în întrebarea de mai sus.. tot afișează doar o postare pe rând.. aș aprecia dacă ai putea arunca o privire și să mă ajuți.. vreau să afișez trei postări într-un singur carusel și așa mai departe

dilip shrestha dilip shrestha
3 ian. 2017 21:27:44