Bootstrap Carousel Slider as Background Image - Cover

<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" style="background-image: url('<?php the_field('slide'); ?>');">
       <div class="carousel-caption">
          <div class="carousel-head">
               <h2><?php the_title(); ?></h2>
           </div>
           <p><?php the_field('caption_text'); ?></p>
           <?php echo do_shortcode('[cta]'); ?>
       </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" style="background-image: url('<?php the_field('slide'); ?>');">
       <div class="carousel-caption">
          <div class="carousel-head">
               <h2><?php the_title(); ?></h2>
           </div>
           <p><?php the_field('caption_text'); ?></p>
           <?php echo do_shortcode('[cta]'); ?>
       </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>
About Gabor Flamich
