How to make pojavlenie arrows slick slider only if the goods are not fit into a single row?

Good afternoon, decided to remake standard modules "recommended" therefore, it 2.3 in a carousel of products, the situation is as follows. Did the layout, plugged slick slider. By default, installed in a slider of products will be 4 on PC version. But here is the question, if the goods is less than 4, the slider is not working correctly
the slider becomes small and the item card stomps. If more than 4 that's all 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="read<?php echo $module;?>">
 <i class="fa fa-chevron-left" ></i>
 <i class="fa fa-chevron-right" ></i>
</div>
</div>
 <div class="row slide-read<?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">Buy in one click</button>--->
</div>

<!--item-->
</div>
</div>
 <?php }?>
</div>

</div>
 <!-- /.section-product -->
 <script type="text/javascript">
 $(document).ready(function() {
 $('.slide-read<?php echo $module;?>').slick({
nextArrow: document.querySelector('#read<?php echo $module;?> .fa-chevron-right'),
prevArrow: document.querySelector('#read<?php echo $module;?> .fa-chevron-left'),
slidesToShow: 4,
 slidesToScroll: 3,
infinite: false,
arrow:false,


});
});
 </script>


Here is a screenshot
there where recommended then it is a problem and where the bestseller, there are more than 3 products, there are all gdu

Here
March 19th 20 at 08:28
1 answer
March 19th 20 at 08:30
if(count($products) > 4) {
 // Code
} else {
 // Code
}
But on the mobile version ? there in line is not more than 1 product.. - ephraim commented on March 19th 20 at 08:33
@ephraim, I'm not a very good solution written.
Slick poidee must not break if items less than items in the slider. You need to edit the layout in the first place - Christophe_Howe commented on March 19th 20 at 08:36
@Christophe_Howe, it is true that he must not break
I use 4 bootstrap, and Flex boxes, they kind of conflict there, with slick slider.. - ephraim commented on March 19th 20 at 08:39

Find more questions by tags OpenCartjQueryJavaScript