I have problem with looping and WP_Query. Any idea how i can implement the multiple carouselitems please check what html output should be in html
So basically one of my goal is each div have a pages
<div class="col-sm-6 col-md-3"></div>
should have get all pages from parents which is "Destinations".
So i have an class CarouselItem active. (Actually this is only a slider style for changing the contents purposes).
And here the previous what html code should be in wordpress i mean the output in html format.
<section class="carouselItem active">
<div class="col-sm-6 col-md-3">
<span>
<div class="col-xs-4 col-sm-12">
<-- thumbnail -->
</div>
<div class="col-xs-8 col-sm-12">
<-- content -->
</div>
</span>
</div>
<div class="col-sm-6 col-md-3">
<span>
<div class="col-xs-4 col-sm-12">
<-- thumbnail -->
</div>
<div class="col-xs-8 col-sm-12">
<-- content -->
</div>
</span>
</div>
<div class="col-sm-6 col-md-3">
<span>
<div class="col-xs-4 col-sm-12">
<-- thumbnail -->
</div>
<div class="col-xs-8 col-sm-12">
<-- content -->
</div>
</span>
</div>
<div class="col-sm-6 col-md-3">
<span>
<div class="col-xs-4 col-sm-12">
<-- thumbnail -->
</div>
<div class="col-xs-8 col-sm-12">
<-- content -->
</div>
</span>
</div>
</section>
<section class="carouselItem"></section>
<section class="carouselItem"></section>
And here what i do with wordpress. Yes i'm a little bit new with wordpress.
Here what i do i use post_per_page to 4, post_type to pages since i want to query all pages under destinations. And post_parent to a variable of $destination with ->ID
<?php
$destination = get_page_by_title( 'Destinations');
// WP_Query arguments
$args = array (
'post_parent' => $destination->ID,
'post_type' => 'page',
'posts_per_page' => '4',
);
// The Query
$query = new WP_Query( $args );
?>
<section class="carouselItem active">
<?php
if($query-> have_posts()): while($query->have_posts()): $query->the_post();
$location = get_post_meta($post->ID, 'Location', $single = true);
?>
<div class="col-sm-6 col-md-3">
<span>
<div class="col-xs-4 col-sm-12">
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('homepage'); // Declare pixel size you need inside the array ?>
</a>
<?php else :?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/others/placeholder2.jpg" alt="">
<?php endif; ?>
</div>
<div class="col-xs-8 col-sm-12">
<h5><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h5>
<small><?php echo $location; ?> </small>
<p><?php the_excerpt(); ?></p>
</div>
</span>
</div>
<?php endwhile; endif; ?>
</section>
Result on me is are they only loop the content and the carouselItem is not duplicating for another post
Thank you for help. i'm very new with WP_Query.
Update after the update for diego: The carousel is now working but the pages seems only same. like this one
slider 1 = A A A A slider 2 = B B B B slider 3 = C C C C slider 4 = D D D D
instead of slider 1 = A B C D slider 2 = E F G H slider 3 = I J K L