ISTWCMS-5650: Swap out owl and Add the flickity to the javascript

src/patterns/04-components/facts-and-figures/facts-and-figures.js

@@ -5,7 +5,7 @@
 (function ($, Drupal) {
   'use strict';
   Drupal.behaviors.factfigure = {
-    attach: function () {
+    attach: function (context) {
 
       /**
        * Run the carousel.
@@ -14,31 +14,29 @@
        * @return {null} void
        */
       function runCarousel(id, numOfItems) {
-
-        // Add the carousel to the FF using the id.
-        $(id + ' .owl-carousel').owlCarousel({
-          margin: 10,
-          nav: true,
-          navContainerClass: 'uw-owl-nav',
-          navText: [
-            '‹ prev',
-            'next ›'
-          ],
-          responsiveClass: true,
-          responsive: {
-            0: {
-              items: 1
-            },
-            600: {
-              items: numOfItems <= 2
-                ? (numOfItems - 1 > 0)
-                  ? numOfItems - 1 : 1 : 2
-            },
-            1000: {
-              items: numOfItems
+        var $carousel = $(id + ' .carousel', context);
+
+        if ($carousel.length) {
+          $carousel.flickity({
+            cellAlign: 'left',
+            contain: true,
+            pageDots: false,
+            prevNextButtons: true,
+            wrapAround: true,
+            groupCells: function () {
+              var width = $(window).width();
+              if (width <= 600) {
+                return 1;
+              }
+              else if (width <= 1024) {
+                return Math.min(2, numOfItems);
+              }
+              else {
+                return numOfItems;
+              }
             }
-          }
-        });
+          });
+        }
       }
 
       /**