Bootstrap Slider with Custom Post Type

<div id="slider-wrapper" class="container-fluid">

<div id="mySlider" class="carousel slide" data-ride="carousel"> 
  
   <ol class="carousel-indicators">
    <li data-target="#mySlider" data-slide-to="0" class="active"></li>
    <li data-target="#mySlider" data-slide-to="1"></li>
    <li data-target="#mySlider" data-slide-to="2"></li>
    <li data-target="#mySlider" data-slide-to="3"></li>
  </ol>
   
    <div class="carousel-inner" role="listbox">

      <!--LOOP ACTIVE ITEMS-->      
   
    <?php wp_reset_postdata();

	 $the_query = new WP_Query(array(
                'post_type' => 'slider', 
                'posts_per_page' => 1 
                )); 

                               
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
       <div class="carousel-item active">
       <img src="<?php the_field('slide'); ?>" alt="<?php the_field('caption_title'); ?>">
       <div class="carousel-caption">
           <h2><?php the_title(); ?></h2>
           <p class="hidden"><?php the_field('caption_text'); ?></p>
       </div>
        
    </div><!--item-active-->
    <?php endwhile; wp_reset_postdata(); ?>
    
<!--LOOP ITEMS-->    
      <?php  
       $the_query = new WP_Query(array(
                'post_type' => 'slider', 
                'posts_per_page' => 2, 
                'offset' => 1 
                )); 

                               
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
       <div class="carousel-item">
       <img src="<?php the_field('slide'); ?>" alt="<?php the_field('caption_title'); ?>">
       <div class="carousel-caption">
           <h2><?php the_title(); ?></h2>
           <p class="hidden"><?php the_field('caption_text'); ?></p>
       </div>
    </div><!--item-active-->
    <?php endwhile; wp_reset_postdata(); ?>
         
       </div>  
 
   <div class="carousel-control-wrapper hidden">
   <a class="carousel-control-prev" data-target="#mySlider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" data-target="#mySlider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>  
</div>