I have a problem creating a dynamic carousel , I created a loop that takes wordpress posts and creates slider items in case it has 3 columns, a carousel multi items I use the arrow to move to the next problem is that every 3 views are all repeated until I move to the next, how do I display the information without repeating, the columns are bootstrap , follow the code.
<?php
$slides = array();
$args = array( 'category_name' => 'servicos', 'nopaging'=>true, 'posts_per_page'=>5 );
$slider_query = new WP_Query( $args );
if ( $slider_query->have_posts() ) {
while ( $slider_query->have_posts() ) {
$slider_query->the_post();
if(has_post_thumbnail()){
$temp = array();
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
$temp['title'] = get_the_title();
$temp['excerpt'] = get_the_excerpt();
$temp['image'] = $thumb_url;
$slides[] = $temp;
}
}
}
wp_reset_postdata();
?>
<div class="nossos-servicos">
<div class="container">
<div class="row">
<div class="col-md-12">
<center>
<h2>NOSSOS SERVIÇOS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<br><br>
</center>
</div>
</div>
<?php if(count($slides) > 0) { ?>
<div class="row">
<div class="col-md-12">
<center>
<!--<div class="container">-->
<!--<div class="col-xs-12">-->
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<?php //for($x=0;$x<10;$x++){ ?>
<?php $i=0; foreach($slides as $slide) { extract($slide); ?>
<div class="item <?php if($i==0) { echo "active"; } ?>">
<ul class="thumbnails">
<?php for($y=0;$y<3;$y++){ ?>
<li class="col-sm-4">
<div class="casing">
<img src="<?php echo $image ?>" alt="">
<div class="caption">
<h4><?php echo $title; ?></h4>
<p><?php echo $excerpt; ?></p>
<a class="btn btn-mini" href="#">saiba mais</a><!-- » -->
</div>
</div>
</li>
<?php } ?>
</ul>
</div><!-- /Slide1 -->
<?php $i++; } ?>
<?php //} ?> <!-- fim for x -->
</div>
<nav>
<ul class="control-box pager">
<li class="left"><a data-slide="prev" href="#myCarousel" class="arrowStil"><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li class="right"><a data-slide="next" href="#myCarousel" class="arrowStil"><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->
<!--</div>--><!-- /.col-xs-12 -->
<!--</div>--><!-- /.container -->
</center>
</div>
</div>
<?php }?><!-- if se tem slider -->
</div>
</div>