$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>loop - How do I display 3 post each in a bootstrap carousel?|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>loop - How do I display 3 post each in a bootstrap carousel?

    loop - How do I display 3 post each in a bootstrap carousel?

    matteradmin7PV0评论

    The following code displays 3 posts in a row which is in class item active.. but how do i display other post in custom post type class item so the carousel slides to display other 3 posts in a row like the image above..

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

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

    The following code displays 3 posts in a row which is in class item active.. but how do i display other post in custom post type class item so the carousel slides to display other 3 posts in a row like the image above..

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

    Using 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>
    • loop
    Share Improve this question edited Jan 3, 2017 at 19:26 dilip shrestha asked Jan 3, 2017 at 16:51 dilip shresthadilip shrestha 161 gold badge1 silver badge5 bronze badges 2
    • Do you have a working example without WordPress? This sounds like a non-WordPress issue but a jQuery / jQuery Plugin issue. – Howdy_McGee ♦ Commented Jan 3, 2017 at 18:16
    • the carousel works just fine.. i just want to loop through 3 post each in row div with class item – dilip shrestha Commented Jan 3, 2017 at 19:42
    Add a comment  | 

    1 Answer 1

    Reset to default 0

    A div with class="item" is used for each carousel slide. But right now your foreach loop is inside that div, not outside, so all of your posts are going into one slide.

    So just change that bit to:

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

    And finally, change your query at the top to get as many posts as you want in the carousel, such as 10:

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

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far