From 2c8bf8adeb157dc0d3b4b5618e7fc91f72737409 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 25 Feb 2025 09:45:35 -0500
Subject: [PATCH] ISTWCMS-5650: Swap out owl and Add the flickity to the
javascript
---
.../facts-and-figures/facts-and-figures.js | 48 +++++++++----------
1 file changed, 23 insertions(+), 25 deletions(-)
diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.js b/src/patterns/04-components/facts-and-figures/facts-and-figures.js
index 627c271e..313a2168 100644
--- a/src/patterns/04-components/facts-and-figures/facts-and-figures.js
+++ b/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;
+ }
}
- }
- });
+ });
+ }
}
/**
--
GitLab