Как сделать появлние стрелок slick slider, только если товары уже не помещаются в один ряд?

Question

[Alpha12]

Добрый день, решил переделать стандартные модули "рекомендуемые" опенкарт 2.3 в виде карусели товаров, ситуации такова. Сделал верстку, подключил slick slider. По умолчанию установил в слайдер что товаров будет 4 на ПК версии. Но тут таков вопрос, если товаров меньше 4 то слайдер не работает корректно
область слайдера становится маленькой и карточку товара плющит. Если больше 4 то все гуд.
вот код

<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>

Вот скриншот
там где рекомендуемые то это проблема а там где хит продаж, там больше 3 продуктов, там все гду

Вот

Answer 1

[zoozag]

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

Comments

[Alpha12]

А на моб версии ? там же в строку больше 1 не идет товара..

[zoozag]

Alpha12, Вообще, я не очень хорошее решение написал.
Поидее slick не должен ломаться, если товаров меньше чем позиций в слайдере. Вам надо верстку править в первую очередь

[Alpha12]

zoozag, это верно, что он не должен ломаться
я бутстрап 4 использую, и флекс боксы, у них вроде как конфликтов нету, с slick slider..