<? $hash = md5( time() . rand( 0, 9999999999 ) );?>
<div class="products-box-<?= $hash;?>">
  <div class="swiper">
    <div class="swiper-wrapper">
      <?
        foreach ( $this -> products as $product ):
          if ( $product -> status ):
            echo \Shared\Tpl\Tpl::view( 'shop-product/product-mini', [
                'product' => $product,
                'class'   => 'item',
                'product_mini_class' => 'swiper-slide'
            ] );
          endif;
        endforeach;
      ?>
    </div>
  </div>
  <div class="swiper-button-next products-box-<?= $hash;?>-next"></div>
  <div class="swiper-button-prev products-box-<?= $hash;?>-prev"></div>
</div>
<script class="footer" type="text/javascript">
  $( function()
  {
    if( $( ".products-box-<?= $hash;?> .swiper").length ) {
      const swiper<?= $hash;?> = new Swiper(".products-box-<?= $hash;?> .swiper", {
        slidesPerView: 6,
        spaceBetween: 30,
        initialSlide : 1,
        centeredSlides: true,
        lazy: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".products-box-<?= $hash;?>-next",
          prevEl: ".products-box-<?= $hash;?>-prev",
        },

        breakpoints: {
          1400: {
            slidesPerView: 6,
          },
          1200: {
            slidesPerView: 5,
          },
          991: {
            slidesPerView: 4,
          },
          576: {
            slidesPerView: 3,
          },
          300: {
            slidesPerView: 2,
          },
          200: {
            slidesPerView: 1,
          }
        },
        on: {
          slideChange: function() {
            observer.observe();
          }
        }
      });
    }
  });
</script>