first commit

templates_user/components/product-images.php

@@ -0,0 +1,43 @@
+<div class="pictures">
+  <div class="subpages-slider-container" style="width: 100%;">
+    <div class="splide subpages-slider-<?= $this -> article_id; ?>-<?= $this -> i; ?>">
+      <div class="splide__track">
+        <ul class="splide__list">
+          <? foreach ( $this -> images as $image ):?>
+            <li class="splide__slide">
+              <a href="/<?= $this -> path;?><?= $image;?>" class="image">
+                <img alt="" src="/<?= $this -> path;?><?= $image;?>" class="nolazy" style="max-width: 100%;" />
+              </a>
+            </li>
+          <? endforeach;?>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+<script class="footer" type="text/javascript">
+
+  $(function() {
+    $( ".pictures .splide__list .splide__slide a.image" ).fancybox({
+      closeBtn		: true,
+    });
+  })
+
+  const checkSlider_<?= $this -> article_id;?>_<?= $this -> i;?> = document.querySelector( '.subpages-slider-<?= $this -> article_id; ?>-<?= $this -> i; ?>' );
+  if ( checkSlider_<?= $this -> article_id;?>_<?= $this -> i;?> )
+  {
+    let checkSlider_<?= $this -> article_id;?>_<?= $this -> i;?> = new Splide( ".subpages-slider-<?= $this -> article_id; ?>-<?= $this -> i; ?>", {
+      direction     : "ltr",
+      perPage       : 1,
+      autoplay      : false,
+      arrows        : false,
+      pagination    : true,
+      type          : 'loop',
+      classes       : {
+        pagination  : 'splide__pagination splide__pagination__custom',
+        page        : 'splide__pagination__page splide__pagination__page__custom',
+      },
+    });
+    checkSlider_<?= $this -> article_id;?>_<?= $this -> i;?>.mount();
+  }
+</script>