first commit

themes/ayon__/_dev/js/sliders.js

@@ -0,0 +1,95 @@
+import $ from 'jquery';
+import { flickity } from "../node_modules/flickity/dist/flickity.pkgd.min";
+
+$(document).on('ready', function(){
+
+  var $sliders = $('.slideme');
+  $sliders.on('dragStart.flickity', () => $sliders.find('.flickity-slider > *').css('pointer-events', 'none'));
+  $sliders.on('dragEnd.flickity', () => $sliders.find('.flickity-slider > *').css('pointer-events', 'all'));
+
+  function sliders_def() {
+    // HP sliders
+    $('.featured-products.slideme .products').each(function() {
+      var hasAuto = ($(this).parent('.featured-products').attr('data-auto') === 'true') ? 4400 :false;
+      $(this).flickity({
+        autoPlay: hasAuto,
+        contain: true,
+        draggable:1,
+        prevNextButtons: true,
+        pageDots: false,
+        cellAlign: 'left',
+        arrowShape: {
+          x0: 20,
+          x1: 60, y1: 50,
+          x2: 75, y2: 50,
+          x3: 35
+        }
+      })
+    });
+
+    // Specials column slider
+    $('#roy_specials_col .products').flickity({
+      autoPlay: 4400,
+      contain: true,
+      draggable:1,
+      prevNextButtons: true,
+      imagesLoaded: true,
+      pageDots: false,
+      arrowShape: {
+        x0: 20,
+        x1: 60, y1: 50,
+        x2: 75, y2: 50,
+        x3: 35
+      }
+    });
+
+    // Brands slider
+    $('.roy_brands_ul').flickity({
+      contain: true,
+      draggable:1,
+      prevNextButtons: true,
+      pageDots: false,
+      cellAlign: 'left',
+      arrowShape: {
+        x0: 20,
+        x1: 60, y1: 50,
+        x2: 75, y2: 50,
+        x3: 35
+      }
+    });
+
+    // Blog Latest posts slider
+    $('.blogslider').flickity({
+      contain: true,
+      draggable:1,
+      prevNextButtons: true,
+      pageDots: false,
+      arrowShape: {
+        x0: 20,
+        x1: 60, y1: 50,
+        x2: 75, y2: 50,
+        x3: 35
+      }
+    });
+
+    // Product page products sliders
+    $('#product .products').flickity({
+      draggable:1,
+      prevNextButtons: true,
+      pageDots: false,
+      cellAlign: 'center',
+      contain: true,
+      arrowShape: {
+        x0: 20,
+        x1: 60, y1: 50,
+        x2: 75, y2: 50,
+        x3: 35
+      }
+    });
+  }
+
+  $(window).load(function() {
+    sliders_def();
+  });
+
+});