Как отображать по 3 записи в карусели Bootstrap?

Question

Как отображать по 3 записи в карусели Bootstrap?

3 янв. 2017 г., 18:51:55

Просмотры: 13.5K

Голосов: -1

изображение для примера

Следующий код выводит 3 записи в ряд, которые находятся в классе item active. Но как мне вывести другие записи из пользовательского типа записи в классе item, чтобы карусель переключалась и показывала следующие 3 записи в ряд, как на изображении выше.

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

Использование 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

цикл

Комментарии

У вас есть рабочий пример без WordPress? Похоже, что это не проблема WordPress, а проблема jQuery / jQuery Plugin.

Howdy_McGee

3 янв. 2017 г. 20:16:50

карусель работает нормально.. я просто хочу перебирать 3 записи в каждой строке div с классом item

dilip shrestha

3 янв. 2017 г. 21:42:26

Все ответы на вопрос

Комментарии

Привет.. Я попробовал, как вы сказали.. но по-прежнему в карусели отображается по одному посту, а мне нужно три поста в ряд с классом item и чтобы они прокручивались с активным классом

dilip shrestha

3 янв. 2017 г. 21:19:46

Я бы предложил вам скопировать и вставить пример кода карусели Bootstrap, убедиться, что он работает, а затем постепенно изменять его, вставляя ваш код постов, проверяя работоспособность после каждого изменения.

iguanarama

3 янв. 2017 г. 21:22:23

Я также пробовал использовать цикл while.. Я добавил код в вопрос выше.. Но все равно отображается только один пост за раз.. Буду признателен, если вы сможете взглянуть и помочь.. Мне нужно отображать три поста в одной карусели и так далее

dilip shrestha

3 янв. 2017 г. 21:27:44

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

Элемент div с class="item" используется для каждого слайда карусели. Но сейчас ваш цикл foreach находится внутри этого div, а не снаружи, поэтому все ваши записи попадают в один слайд.

Просто измените эту часть на:

<div class="carousel-inner">
    <?php foreach ($lastposts as $post) : setup_postdata ($post); ++$index; ?>
        <div class="item<?php if ($index == 1) { echo ' active'; } ?>">
            // Ваша запись здесь
        </div> <!-- item -->
    <?php endforeach; ?>
</div> <!-- carousel-inner -->

И наконец, измените ваш запрос в начале, чтобы получить столько записей, сколько нужно для карусели, например, 10:

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