wordpress PHP to show 3 slide per page with bootstrap carousel - php

Question

hello i tried to show 3 slide per page with bootstrap carousel but when I use wordpress php query it showed just 1 slide per page :( and for show another slide i should click on next... please see this http://bootsnipp.com/snippets/featured/responsive-moving-box-carousel
I tried to code this by php query .
my php code :
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<?php
$counter=0;
?>
<div class="item <?php if($counter==0){echo 'active';} ?>">
<ul class="thumbnails">
<?php
$my_query = new WP_Query('showposts=3&cat=1');
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li class="col-sm-4">
<div class="shakhes">
<?php the_post_thumbnail('shakhes') ?>
<div class="caption"><a href="<?php the_permalink(); ?>">
<h4><div class="livicon" data-name="chevron-left" data-size="30" data-color="#555" data-hovercolor="#555" ></div><?php the_title(); ?></h4></a>
<p><?php the_content_rss('', TRUE, '', 20); ?></p>
<div class="moreshakhes"> مشاهده ادامه مطلب</div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php $counter++; ?>
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->

Answer 1

You have written a wrong sctipt and used many depricated wordpress functions. the_content_rss function is deprecated and use the_content_feed and to show posts you have to use 'posts_per_page' instead showposts . I have rewritten your script with proper functions. Copy it from below and paste it to your template.I have checked the script and its working. Let me know if something wrong happen with you..
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<?php
$counter=0;
?>
<div class="item <?php if($counter==0){echo 'active';} ?>">
<ul class="thumbnails">
<?php
$my_query = new WP_Query(array(
'posts_per_page' => 5,
'cat' => '1',
)
);
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li class="col-sm-4">
<div class="shakhes">
<?php the_post_thumbnail('shakhes') ?>
<div class="caption"><a href="<?php the_permalink(); ?>">
<h4><div class="livicon" data-name="chevron-left" data-size="30" data-color="#555" data-hovercolor="#555" ></div><?php the_title(); ?></h4></a>
<p><?php the_content_feed('', TRUE, '', 20); ?></p>
<div class="moreshakhes"> مشاهده ادامه مطلب</div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php $counter++; ?>
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->

Answer 2

This is the solution I came up with:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
<div class="carousel-inner">
<?php $args = array(
'post_type' => 'product',
'posts_per_page' => 8,
);
$query = new WP_Query( $args );
$i = 1;
$next_item = true;
while($query->have_posts()) : $query->the_post();
if ($i == 1) {
echo '<div class="item carousel-item active">';
} elseif ($next_item == true) {
echo '<div class="item carousel-item">';
}
?>
<div class="col-sm-3">
<div class="thumb-wrapper">
<div class="img-box">
<?php the_post_thumbnail();?>
<h4><?php the_title();?></h4>
</div>
<div class="thumb-content">
<?php the_excerpt();?>
Read More
</div>
</div>
</div>
<?php
$next_item = false;
if ($i % 4 == 0) {
echo '</div>';
$next_item = true;
}
$i++;
endwhile
?>
</div>
<a class="carousel-control-prev pull-left" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control-next pull-right" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>