How to make slick slider arrows appear only if products don't fit in one row already?

Question

JavaScript

Good afternoon, I decided to remake the standard modules "recommended" opencart 2.3 in the form of a carousel of goods, the situation is as follows. Made layout, connected slick slider. By default, I set in the slider that there will be 4 products on the PC version. But here is the question, if there are less than 4 products, then the slider does not work correctly,
the slider area becomes small and the product card flattens. If more than 4 then everything is good.
here is the code

<div class="section-product">
        <div class="title-section">
          <h2 class="name-category"><?php echo $heading_title; ?></h2> 
          <div class="arrow-slide" id="recomend<?php echo $module;?>">
            <i class="fa fa-chevron-left " ></i>
            <i class="fa fa-chevron-right " ></i>
          </div>
        </div>
        <div class="row slide-recomend<?php echo $module;?> slide-zone">
          <?php foreach ($products as $product) { ?>
         <div class="col-md-3 col-sm-4 col-12 col-lg-3 ">
            <div class="item">
              <a href="<?php echo $product['href']; ?>">
                <img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" >
              <h3><?php echo $product['name']; ?>
                  </h4></a>
                <div class="short-descr">
                  <?php echo $product['description']; ?>
                </div>
                    <?php if ($product['price']) { ?>
        <p class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
          <?php } ?>
          <?php if ($product['tax']) { ?>
          <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
          <?php } ?>
        </p>
        <?php } ?>               
                <div class="block-btn-buy">
                  <button class="buy" onclick="cart.add('<?php echo $product['product_id']; ?>');" ><?php echo $button_cart; ?></button>
                 <!--- <button class="fast-buy">Купить в один клик</button>--->
                </div>
             
              <!--item-->
            </div>
              </div>
               <?php }?>
        </div>
     
   </div>
   <!-- /.section-product -->
   <script type="text/javascript">
     $(document).ready(function() {
      $('.slide-recomend<?php echo $module;?>').slick({
nextArrow: document.querySelector('#recomend<?php echo $module;?> .fa-chevron-right'),
prevArrow: document.querySelector('#recomend<?php echo $module;?> .fa-chevron-left'),
slidesToShow: 4,
  slidesToScroll: 3,
infinite: false,
arrow:false,


});
     });
   </script>

Here is a screenshot
where the recommended ones are a problem, but where there is a bestseller, there are more than 3 products, everything is there.

Here

Answer 1

if(count($products) > 4) {
  // Code
} else {
  // Code
}