Slick Slider not working correctly with smarty foreach loop?

Question

Smarty

The situation is this. There is a parent on which hangs slick slider. This parent has a child which is processed by foreach smarty and generates the given number of products. Slick Slider does not display slide behavior correctly. Could there be a reason that the child elements are processed in the foreach?

<div class="product_other__slide">
          {foreach from=$products item=product name=products}
            {if $smarty.foreach.products.index le 12}
            <div class="col-md-3 col-lg-3">
              <div class="product_trending__box">
                <div class="product_trending__item d-flex justify-content-center align-items-center">
                  <div class="product_trending__box-glass">
                    <img class="product_trending__item-glass" src="{$AltSkinDir}/images/content/glass1.png" alt="">
                  </div>
                  <div class="product_trending__sale">
                    <img src="{$AltSkinDir}/images/content/group-7.png" alt="">
                    <img src="{$AltSkinDir}/images/content/group-12.png" alt="">
                  </div>
                  <div class="product_trending__cart">
                    <span>add to cart</span>
                  </div>
                </div>
                <div class="product_trending__details">
                  <div class="product_trending__wrapper">
                  {*$product|@debug_print_var*}
                    <p class="product_trending__details-name">{$product.product}</p>
                    <i class="fa fa-heart-o product_trending__heart"></i>
                  </div>
                  <span class="product_trending__details-price">{$product.list_price}</span>
                </div>
              </div>
            </div>
            {/if}
            {/foreach}
         </div>

<script>
  $(document).ready(function() {
    $('.product_other__slide').slick({
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 4,
      dots: true
    });
  })
</script>