Converting a div (lg-col-6) (lg-col-6) into slider version

I have a custom requirement in WordPress where an entire block / section needs to be converted into slider format. Meaning to say, the values in the div are dynamic and there are 5 set of individual variables holding an array of data being fetched. Now the code and everything is working fine. But the requirement is to change the view of my result into a slider format.

I’m aware of bootstrap carousel, but the issues is I have 5 different sets of array to work with. How do I put the loop for the same to create a slider..

Below is the entire block of code.

Any help would me much appreciated.

        <div class="block-wrap">         <div class="block-title-wrap d-flex justify-content-between align-items-center">                 <h2>Recomended Properties</h2>                            <?php                         function get_images_medium_urls (&$  urls = [], $  arr, $  find = ['medium', 'url']) {             foreach ($  arr as $  key => $  value) {                 if ($  key === $  find[0]) $  urls[] = $  value[$  find[1]];                 else if (is_array($  value)) get_images_medium_urls($  urls, $  value, $  find);             }         }                     $  rec1= get_post_meta($  post->ID, 'fave_recommended-property-1', true);          $  rec2= get_post_meta($  post->ID, 'fave_recommended-property-2', true);          $  rec3= get_post_meta($  post->ID, 'fave_recommended-property-3', true);          $  rec4= get_post_meta($  post->ID, 'fave_recommended-property-4', true);          $  rec5= get_post_meta($  post->ID, 'fave_recommended-property-5', true);                    $  rec1_vals = get_post_meta($  rec1);          $  rec2_vals = get_post_meta($  rec2);          $  rec3_vals = get_post_meta($  rec3);          $  rec4_vals = get_post_meta($  rec4);          $  rec5_vals = get_post_meta($  rec5);                    $  size = 'houzez-item-image-1';                  $  properties_images_rec1 = rwmb_meta( 'fave_property_images', 'type=plupload_image&size='.$  size, $  rec1_vals['fave_property_id'][0] );         $  properties_images_rec2 = rwmb_meta( 'fave_property_images', 'type=plupload_image&size='.$  size, $  rec2_vals['fave_property_id'][0] );         $  properties_images_rec3 = rwmb_meta( 'fave_property_images', 'type=plupload_image&size='.$  size, $  rec3_vals['fave_property_id'][0] );         $  properties_images_rec4 = rwmb_meta( 'fave_property_images', 'type=plupload_image&size='.$  size, $  rec4_vals['fave_property_id'][0] );         $  properties_images_rec5 = rwmb_meta( 'fave_property_images', 'type=plupload_image&size='.$  size, $  rec5_vals['fave_property_id'][0] );                              get_images_medium_urls($  medium_images_urls1, $  properties_images_rec1);             get_images_medium_urls($  medium_images_urls2, $  properties_images_rec2);             get_images_medium_urls($  medium_images_urls3, $  properties_images_rec3);             get_images_medium_urls($  medium_images_urls4, $  properties_images_rec4);             get_images_medium_urls($  medium_images_urls5, $  properties_images_rec5);                                        ?>             </div><!-- block-title-wrap -->                                    <div class="listing-view grid-view card-deck">                  <?php if($  rec1_vals['fave_property_id'][0] > 0){?>               <!-- Recomended Property 1 -->                   <div class="item-listing-wrap hz-item-gallery-js item-listing-wrap-v6 card" >     <div class="item-wrap item-wrap-v6 h-100">         <div class="d-flex align-items-center h-100">             <div class="item-header">                 <div class="listing-image-wrap">                     <div class="listing-thumb">                         <a class="listing-featured-thumb" href="<?php echo get_permalink( $  rec1_vals['fave_property_id'][0] ); ?>">                         <img width="484" height="300" src="<?php echo $  medium_images_urls1[0];?>" data-src="<?php echo $  medium_images_urls1[0];?>" class="" alt="" loading="lazy" srcset="" data-srcset="<?php echo $  medium_images_urls1[0];?>" />                      </a>                     </div>                 </div>             </div><!-- item-header -->               <div class="item-body flex-grow-1">                 <h2 class="item-title">     <a href="<?php echo get_permalink( $  rec1_vals['fave_property_id'][0] ); ?>"><?php echo get_the_title($  rec1_vals['fave_property_id'][0]);?></a> </h2><!-- item-title -->                 <div class="d-flex justify-content-between align-items-center amenities-price-wrap">                     <ul class="item-price-wrap">                         <li class="item-price"> <?php echo $  rec1_vals['fave_property_price'][0] . ' ' .  $  rec1_vals['fave_property_price_postfix'][0];?></li>                     </ul>                     <ul class="item-amenities item-amenities-with-icons">     <li class="h-beds"><i class="houzez-icon icon-hotel-double-bed-1 mr-1"></i><span class="item-amenities-text">Beds:</span> <span class="hz-figure"><?php echo $  rec1_vals['fave_property_bedrooms'][0] . ' BHK';?></span></li></ul>               </div><!-- d-flex -->             </div><!-- item-body -->         </div><!-- d-flex -->     </div><!-- item-wrap --> </div><!-- item-listing-wrap -->  <?php } ?>       <!-- Close Recomended Property 1 -->  <?php if($  rec2_vals['fave_property_id'][0] > 0){?> <!-- Recomended Property 2 -->                   <div class="item-listing-wrap hz-item-gallery-js item-listing-wrap-v6 card" >     <div class="item-wrap item-wrap-v6 h-100">         <div class="d-flex align-items-center h-100">             <div class="item-header">                 <div class="listing-image-wrap">                     <div class="listing-thumb">                         <a class="listing-featured-thumb" href="<?php echo get_permalink( $  rec2_vals['fave_property_id'][0] ); ?>">                         <img width="484" height="300" src="<?php echo $  medium_images_urls2[0];?>" data-src="<?php echo $  medium_images_urls2[0];?>" class="" alt="" loading="lazy" srcset="" data-srcset="<?php echo $  medium_images_urls2[0];?>"/>                       </a>                     </div>                 </div>             </div><!-- item-header -->               <div class="item-body flex-grow-1">                 <h2 class="item-title">     <a href="<?php echo get_permalink( $  rec2_vals['fave_property_id'][0] ); ?>"><?php echo get_the_title($  rec2_vals['fave_property_id'][0]);?></a> </h2><!-- item-title -->                 <div class="d-flex justify-content-between align-items-center amenities-price-wrap">                     <ul class="item-price-wrap">                         <li class="item-price"> <?php echo $  rec2_vals['fave_property_price'][0] . ' ' .  $  rec2_vals['fave_property_price_postfix'][0];?></li>                     </ul>                     <ul class="item-amenities item-amenities-with-icons">     <li class="h-beds"><i class="houzez-icon icon-hotel-double-bed-1 mr-1"></i><span class="item-amenities-text">Beds:</span> <span class="hz-figure"><?php echo $  rec2_vals['fave_property_bedrooms'][0] . ' BHK';?></span></li></ul>               </div><!-- d-flex -->             </div><!-- item-body -->         </div><!-- d-flex -->     </div><!-- item-wrap --> </div> <!-- Close Recomended Property 2 --> <?php } ?> <?php if($  rec3_vals['fave_property_id'][0] > 0){?> <!-- Recomended Property 3 -->                   <div class="item-listing-wrap hz-item-gallery-js item-listing-wrap-v6 card" >     <div class="item-wrap item-wrap-v6 h-100">         <div class="d-flex align-items-center h-100">             <div class="item-header">                 <div class="listing-image-wrap">                     <div class="listing-thumb">                         <a class="listing-featured-thumb" href="<?php echo get_permalink( $  rec3_vals['fave_property_id'][0] ); ?>">                         <img width="484" height="300" src="<?php echo $  medium_images_urls3[0];?>" data-src="<?php echo $  medium_images_urls3[0];?>" class="" alt="" loading="lazy" srcset="" data-srcset="<?php echo $  medium_images_urls3[0];?>"/>                       </a>                     </div>                 </div>             </div><!-- item-header -->               <div class="item-body flex-grow-1">                 <h2 class="item-title">     <a href="<?php echo get_permalink( $  rec3_vals['fave_property_id'][0] ); ?>"><?php echo get_the_title($  rec3_vals['fave_property_id'][0]);?></a> </h2><!-- item-title -->                 <div class="d-flex justify-content-between align-items-center amenities-price-wrap">                     <ul class="item-price-wrap">                         <li class="item-price"> <?php echo $  rec3_vals['fave_property_price'][0] . ' ' .  $  rec3_vals['fave_property_price_postfix'][0];?></li>                     </ul>                     <ul class="item-amenities item-amenities-with-icons">     <li class="h-beds"><i class="houzez-icon icon-hotel-double-bed-1 mr-1"></i><span class="item-amenities-text">Beds:</span> <span class="hz-figure"><?php echo $  rec3_vals['fave_property_bedrooms'][0] . ' BHK';?></span></li></ul>               </div><!-- d-flex -->             </div><!-- item-body -->         </div><!-- d-flex -->     </div><!-- item-wrap --> </div> <!-- Close Recomended Property 3 --> <?php } ?> <?php if($  rec3_vals['fave_property_id'][0] > 0){?> <!-- Recomended Property 4 -->                   <div class="item-listing-wrap hz-item-gallery-js item-listing-wrap-v6 card" >     <div class="item-wrap item-wrap-v6 h-100">         <div class="d-flex align-items-center h-100">             <div class="item-header">                 <div class="listing-image-wrap">                     <div class="listing-thumb">                         <a class="listing-featured-thumb" href="<?php echo get_permalink( $  rec4_vals['fave_property_id'][0] ); ?>">                         <img width="484" height="300" src="<?php echo $  medium_images_urls4[0];?>" data-src="<?php echo $  medium_images_urls4[0];?>" class="" alt="" loading="lazy" srcset="" data-srcset="<?php echo $  medium_images_urls4[0];?>"/>                       </a>                     </div>                 </div>             </div><!-- item-header -->               <div class="item-body flex-grow-1">                 <h2 class="item-title">     <a href="<?php echo get_permalink( $  rec4_vals['fave_property_id'][0] ); ?>"><?php echo get_the_title($  rec4_vals['fave_property_id'][0]);?></a> </h2><!-- item-title -->                 <div class="d-flex justify-content-between align-items-center amenities-price-wrap">                     <ul class="item-price-wrap">                         <li class="item-price"> <?php echo $  rec4_vals['fave_property_price'][0] . ' ' .  $  rec4_vals['fave_property_price_postfix'][0];?></li>                     </ul>                     <ul class="item-amenities item-amenities-with-icons">     <li class="h-beds"><i class="houzez-icon icon-hotel-double-bed-1 mr-1"></i><span class="item-amenities-text">Beds:</span> <span class="hz-figure"><?php echo $  rec4_vals['fave_property_bedrooms'][0] . ' BHK';?></span></li></ul>               </div><!-- d-flex -->             </div><!-- item-body -->         </div><!-- d-flex -->     </div><!-- item-wrap --> </div> <!-- Close Recomended Property 4 --> <?php } ?> <?php if($  rec5_vals['fave_property_id'][0] > 0){?> <!-- Recomended Property 5 -->                   <div class="item-listing-wrap hz-item-gallery-js item-listing-wrap-v6 card" >     <div class="item-wrap item-wrap-v6 h-100">         <div class="d-flex align-items-center h-100">             <div class="item-header">                 <div class="listing-image-wrap">                     <div class="listing-thumb">                         <a class="listing-featured-thumb" href="<?php echo get_permalink( $  rec5_vals['fave_property_id'][0] ); ?>">                         <img width="484" height="300" src="<?php echo $  medium_images_urls5[0];?>" data-src="<?php echo $  medium_images_urls5[0];?>" class="" alt="" loading="lazy" srcset="" data-srcset="<?php echo $  medium_images_urls5[0];?>"/>                       </a>                     </div>                 </div>             </div><!-- item-header -->               <div class="item-body flex-grow-1">                 <h2 class="item-title">     <a href="<?php echo get_permalink( $  rec5_vals['fave_property_id'][0] ); ?>"><?php echo get_the_title($  rec5_vals['fave_property_id'][0]);?></a> </h2><!-- item-title -->                 <div class="d-flex justify-content-between align-items-center amenities-price-wrap">                     <ul class="item-price-wrap">                         <li class="item-price"> <?php echo $  rec5_vals['fave_property_price'][0] . ' ' .  $  rec5_vals['fave_property_price_postfix'][0];?></li>                     </ul>                     <ul class="item-amenities item-amenities-with-icons">     <li class="h-beds"><i class="houzez-icon icon-hotel-double-bed-1 mr-1"></i><span class="item-amenities-text">Beds:</span> <span class="hz-figure"><?php echo $  rec5_vals['fave_property_bedrooms'][0] . ' BHK';?></span></li></ul>               </div><!-- d-flex -->             </div><!-- item-body -->         </div><!-- d-flex -->     </div><!-- item-wrap --> </div> <!-- Close Recomended Property 5 --> <?php } ?>              </div>              </div>   

The output of the current code :

enter image description here