Loop through WP_Query twice for a carousel - php

Question

I am trying to build an image slider / carousel using Bootstrap. The images should be shown from the Wordpress post categories 'Aktuell' and 'Referenz' which I have created. The code below works perfectly for me when I want to show 1 image from the category 'Aktuell' and 3 images from the category 'Referenz'.
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs ">
<div class="carousel-inner">
<?php
$the_query = new WP_Query(array(
'category_name' => 'Aktuell',
'posts_per_page' => 1,
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item active">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('full'); ?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item active -->
<?php
endwhile;
wp_reset_postdata();
?>
<?php
$the_query = new WP_Query(array(
'category_name' => 'Referenz',
'posts_per_page' => 3,
'orderby' => 'rand'
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('slider');?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
What I want to do is to show 3 images from each category. So when I use 'posts_per_page' => 3, on line #6, the slide function will not work anymore when I click on the left or right arrows to slide. Instead the images are getting displayed below each other.
how can I get this fixed?

Answer 1

I could find a way to make it work like this:
function the_carousel_item($post, $post_per_page, $offset = 0, $orderby = 'rand', $active = NULL) {
$the_query = new WP_Query(array(
'category_name' => $post,
'posts_per_page' => $post_per_page,
'orderby' => $orderby,
'offset' => $offset
));
$active_css_class = (isset($active)) ? $active : '';
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item <?= $active_css_class ?>">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('slider');?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
}
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs ">
<div class="carousel-inner">
<?php
// Display the starter image from the post 'Aktuell'
the_carousel_item('Aktuell', 1, 0, 'ID', 'active');
// Display posts from 'Aktuell'
the_carousel_item('Aktuell', 3, 1, 'ID');
// Display posts from 'Referenz'
the_carousel_item('Referenz', 3);
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
<div class="container inner-cont container-contact-field">
<div class="row mobile contact-field">
<div class="col-xs-8 col-xs-offset-2">
<?php dynamic_sidebar('footer_1'); ?>
<?php dynamic_sidebar('footer_2'); ?>
</div>
</div>
</div>

Answer 2

You want showing 1 image above (Aktuell) and 3 image slider below (Referenz), or 1 above 1 slider, or what?
If 3 image below, your slider will not work because you already set 'posts_per_page' => 3