FIX: multi-carousel

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
   "author": "Tony Air <tony@twma.pro>",
   "license": "BSD-2-Clause",
@@ -53,9 +53,9 @@
   ],
   "dependencies": {
     "@a2nt/meta-lightbox-js": "^4.2.1",
-    "@angular/common": "^13.3.3",
+    "@angular/common": "^13.3.5",
-    "@angular/core": "^13.3.3",
+    "@angular/core": "^13.3.5",
-    "@apollo/client": "^3.5.10",
+    "@apollo/client": "^3.6.1",
     "@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed",
     "@popperjs/core": "^2.11.5",
     "@turf/clone": "^6.5.0",
@@ -68,13 +68,14 @@
     "aos": "^2.3.4",
     "apollo3-cache-persist": "^0.14.0",
     "balanced-match": "^2.0.0",
-    "bootbox": "^5.5.2",
+    "bootbox": "^5.5.3",
     "bootstrap": "^5.1.3",
     "brace-expansion": "^2.0.1",
     "density-clustering": "^1.3.0",
+    "eslint-scope": "^7.1.1",
     "fast-deep-equal": "^3.1.3",
     "font-awesome": "^4.7.0",
-    "graphql": "^16.3.0",
+    "graphql": "^16.4.0",
     "hammerjs": "^2.0.8",
     "inputmask": "^5.0.7",
     "kdbush": "^3.0.0",
@@ -83,16 +84,16 @@
     "localforage-cordovasqlitedriver": "^1.8.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^2.8.1",
+    "mapbox-gl": "^2.8.2",
     "material-design-color": "^2.3.2",
     "minimatch": "^5.0.1",
     "moment": "^2.29.3",
-    "react": "^18.0.0",
+    "react": "^18.1.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.1.0",
     "react-easy-swipe": "^0.0.22",
     "react-tiny-oembed": "^1.1.0",
-    "redaxios": "^0.4.1",
+    "redaxios": "^0.5.0",
-    "redux": "^4.1.2",
+    "redux": "^4.2.0",
     "rxjs": "^7.5.5",
     "select2": "^4.0.13",
     "setimmediate": "^1.0.5",
@@ -103,16 +104,16 @@
   },
   "devDependencies": {
     "@a2nt/image-sprite-webpack-plugin": "^0.2.5",
-    "@babel/core": "^7.17.9",
+    "@babel/core": "^7.17.10",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
     "@babel/plugin-syntax-jsx": "^7.16.7",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
     "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/plugin-transform-runtime": "^7.17.10",
     "@babel/plugin-transform-typescript": "^7.16.8",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.17.9",
     "@googlemaps/markerclusterer": "*",
@@ -125,8 +126,8 @@
     "ansi-html": "^0.0.9",
     "ansi-html-community": "^0.0.8",
     "ansi-regex": "^6.0.1",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.7",
-    "babel-loader": "^8.2.4",
+    "babel-loader": "^8.2.5",
     "classnames": "^2.3.1",
     "copy-webpack-plugin": "^10.2.4",
     "croppie": "^2.6.5",
@@ -134,7 +135,7 @@
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "debug": "^4.3.4",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jquery": "^1.5.1",
     "eslint-plugin-react": "^7.29.4",
@@ -152,14 +153,14 @@
     "html-dom-parser": "^1.2.0",
     "html-entities": "^2.3.3",
     "html-loader": "^3.1.0",
-    "html-react-parser": "^1.4.11",
+    "html-react-parser": "^1.4.12",
     "html-webpack-plugin": "^5.5.0",
     "img-optimize-loader": "^1.0.7",
     "loglevel": "^1.8.0",
     "mini-css-extract-plugin": "^2.6.0",
     "ms": "^2.1.3",
     "msw": "^0.39.2",
-    "node-fetch": "^3.2.3",
+    "node-fetch": "^3.2.4",
     "object-assign": "^4.1.1",
     "optimism": "^0.16.1",
     "postcss-loader": "^6.2.1",
@@ -168,7 +169,7 @@
     "querystring": "^0.2.1",
     "raw-loader": "^4.0.2",
     "react-hot-loader": "^4.13.0",
-    "react-is": "^18.0.0",
+    "react-is": "^18.1.0",
     "react-lifecycles-compat": "^3.0.4",
     "regenerator-runtime": "^0.13.9",
     "resolve-url-loader": "^5.0.0",
@@ -179,7 +180,7 @@
     "sass-lint-auto-fix": "^0.21.2",
     "sass-lint-fix": "^1.12.1",
     "sass-loader": "^12.6.0",
-    "scheduler": "^0.21.0",
+    "scheduler": "^0.22.0",
     "shallowequal": "^1.1.0",
     "strip-ansi": "^7.0.1",
     "style-loader": "^3.3.1",
@@ -188,7 +189,7 @@
     "symbol-observable": "^4.0.0",
     "terser-webpack-plugin": "^5.3.1",
     "ts-invariant": "^0.9.4",
-    "tslib": "^2.3.1",
+    "tslib": "^2.4.0",
     "url": "^0.11.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.72.0",

src/js/ui/carousel.js

@@ -13,6 +13,7 @@ const CarouselUI = ((window) => {
       });
       el.ui = carousel;
       const items = el.querySelectorAll(".carousel-item");
+      const numberOfItems = parseInt(items.length);
 
       // create next/prev arrows
       if (el.dataset.bsArrows) {
@@ -47,7 +48,7 @@ const CarouselUI = ((window) => {
         const indicators = document.createElement("div");
         indicators.classList.add("carousel-indicators");
         let i = 0;
-        while (i < items.length) {
+        while (i < numberOfItems) {
           const ind = document.createElement("button");
           ind.setAttribute("type", "button");
           ind.setAttribute("aria-label", `Slide to #${i + 1}`);
@@ -91,22 +92,21 @@ const CarouselUI = ((window) => {
           const el = entry.target;
           const rect = entry.contentRect;
 
+          const items = el.querySelectorAll('.carousel-item');
           const width = rect.width;
           const height = rect.height;
-          const numToDisplay = Math.min(el.dataset['length'], items.length);
+          const numToDisplay = Math.min(parseInt(el.dataset['length']), numberOfItems);
           const itemWidth = width / numToDisplay;
 
           el.dataset['itemWidth'] = itemWidth;
           el.dataset['numToDisplay'] = numToDisplay;
 
-          const items = el.querySelectorAll('.carousel-item');
+          el.querySelector('.carousel-inner').style.width = `${numberOfItems * itemWidth  }px`;
-
-          el.querySelector('.carousel-inner').style.width = `${items.length * itemWidth  }px`;
           items.forEach((el,i) => {
             el.style.width = `${itemWidth  }px`;
           });
 
-          if(items.length === numToDisplay) {
+          if(numberOfItems === numToDisplay) {
             el.classList.add('js-carousel-no-slide');
             carousel.pause();
           }

src/scss/ui/carousel.scss

@@ -95,9 +95,6 @@ $carousel-slide-img-loading-max-height: 25vh !default;
 
 .carousel-multislide {
     overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 
     .carousel-item {
         display: block;