Why is this query not working when another is present? - php

Question

This is driving me nuts, I'm sure it's something stupid but I'm too burnt and can't find it. I'm building a custom WP theme which has 2 sliders, one is the default Bootstrap slider and the other is an Owl Slider. Before you tell me "why don't you use 2 instances of Owl slider?", I already thought of that, tested and works. However, I'm very curious as to why is this not working. Here's my code:
BOOTSTRAP Carousel:
<section id="panel4">
<div class="container">
<h2>Testimonials</h2>
</div>
<!-- container -->
<div class="container-fluid">
<?php $queryObject=new WP_Query( 'post_type=testimonial' ); // The Loop! if ($queryObject->have_posts()) { ?>
<div id="carousel-testimonial" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while ($queryObject->have_posts()) {$queryObject->the_post(); ?>
<div class="item ">
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2 thumb-box">
<img class="thumb" src="<?php echo types_render_field( " testimonial-avatar ", array( url => "true ", "width " => "400 ", "height " => "300 ", "proportional " => "true " ) );?>">
</div>
<div class="col-sm-9 col-md-10">
<h3>"<?php echo types_render_field("testimonial-excerpt", array("argument1"=>"value1","argument2"=>"value2","argument2"=>"value2")); ?>"</h3>
<blockquote>
<?php echo types_render_field( "testimonial-text", array( "argument1"=>"value1","argument2"=>"value2","argument2"=>"value2")); ?></blockquote>
<p class="sig">
<?php echo types_render_field( "testimonial-name", array( "argument1"=>"value1","argument2"=>"value2","argument2"=>"value2")); ?></p>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-testimonial" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-testimonial" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- .carousel -->
</div>
<!-- .container -->
</section>
and then OWL SLIDER
<?php if( have_rows( 'slider_photos') ): ?>
<div class="container-fluid">
<div id="happy" class="owl-carousel">
<?php while( have_rows( 'slider_photos') ): the_row(); // vars $image=g et_sub_field( 'slider_image'); ?>
<div class="item-owl">
<img class="img-responsive" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
</div>
<?php endwhile; ?>
</div>
<!-- .carousel -->
</div>
<?php endif; ?>
Now, the problem seems to be in Bootstrap. If I take it off, Owl slider works. If I add 2 instances of Owl Slider, it works. If I add Bootstrap Carousel, only Bootstrap works and Owl displays nothing (not even in code, it's as if it didn't even exist)
Can anyone tell me what is going on and how to fix this?

Answer 1

Most likely you need to call wp_reset_postdata() before have_rows( 'slider_photos') in the Owl slider, to restore the global $post object, that you override in your Bootstrap carousel loop.
The have_rows('slider_photos') depends on the global $post object.
Another option would be to use have_rows( 'slider_photos', $post_id ) to specify what $post_id you want to use.