  <?php 
$backgroundcolor = $instance['backgroundcolor'];


$image = $image_url[0];


$products_per_page = $instance['products_per_page'];
$title = $instance['title'];
$subtitle = $instance['subtitle'];

if($instance['category'] ){ $category =  array(array(
                            'taxonomy' => 'product_category',
                            'field' => 'term_id',
                            'terms'    => $instance['category']
                            )) ; 
}
$button_text = $instance['button_text'];


?>
<div class="section bg-transparent p-sec" style="background: <?php echo $backgroundcolor; ?> ">
<div class="container">
<div class="heading-block border-bottom-0 text-center" >
<h2 class="text-transform-none fw-semibold mb-1"><?php echo esc_attr( $title ); ?></h2>
</div>
</div>
<div id="image-carousel" class="container mw-lg owl-carousel carousel-widget" data-speed="1500" data-loop="true"   data-margin="24" data-nav="true" data-pagi="true" data-items-xs="1" data-items-sm="1" data-items-md="1" data-items-lg="2" data-items-xl="2"  data-lightbox="gallery">
<?php
$qargs = array(
    'post_status'       => 'publish',
    'post_type'         => 'product',
    'order'             => 'ASC',
	  'tax_query' => $category,
    'posts_per_page'    =>  $products_per_page,
);


$recentPosts = new WP_Query($qargs);

if ($recentPosts->have_posts()) : 

 $i = 1; 
 
  echo '<div class="slide slide--2">';
    echo '<div class="carousel-column-container">';
 
             while ($recentPosts->have_posts()) : $recentPosts->the_post();
                $meta = get_post_meta(get_the_ID());
                $drone_ID = get_the_ID();

                if (has_post_thumbnail($drone_ID, 'full')) {
                    $image_id = get_post_thumbnail_id($drone_ID);
                    $image_thumb = wp_get_attachment_image_src($image_id, 'full', true);
                }
				
				
				if (($i-1) % 3 == 0) {
            if ($i > 1) {
				
				
				        echo '</div>';
                echo '</div>';
                // Open a new slider div container
                echo '<div class="slide slide--2">';
                echo '<div class="carousel-column-container">';
            }
        }
            ?>
<?php 
  if ($i % 3 == 1) {
            // Open a new ul for the first item in every set of three
            echo '<ul class="carousel-column column-2">';
        }

        if ($i % 3 == 1 ) {
            // Add the first and second items in the first ul
            echo '<li class="carousel-grid-item">';
            echo '<a href="' . get_the_permalink() . '" class="item" style="background-image: url(\'' . $image_thumb[0] . '\'); min-height: 324px">';
            echo '<blockquote class="blockquote border-0 mb-0">';
            echo '<p class="mb-3 text-dark">' . get_the_title() . '</p>';
            echo '<footer class="blockquote-footer text-dark-50 fst-italic">View Now</footer>';
            echo '</blockquote>';
            echo '</a>';
            echo '</li>';
			  echo '</ul>';
        } if( $i % 3 == 2 || $i % 3 == 0 ){
            // Open a new ul for the third item in every set of three
          
            echo '<ul class="carousel-column column-1">';

            // Add the third item in the new ul
            echo '<li class="carousel-grid-item">';
            echo '<a href="' . get_the_permalink() . '" class="item" style="background-image: url(\'' . $image_thumb[0] . '\')">';
            echo '<blockquote class="blockquote border-0 mb-0">';
            echo '<p class="mb-3 text-dark">' . get_the_title() . '</p>';
            echo '<footer class="blockquote-footer text-dark-50 fst-italic">View Now</footer>';
            echo '</blockquote>';
            echo '</a>';
            echo '</li>';
        }

        if ($i % 3 == 0) {
            // Close the ul for every third item
            echo '</ul>';
        }
          ?> 

       
<?php $i++;
            endwhile;
            wp_reset_postdata();endif; ?>
</div>
</div>
	 