FIX: multi-carousel
This commit is contained in:
parent
4706b7e074
commit
33e975d447
45
package.json
45
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/core": "^13.3.3",
|
||||
"@apollo/client": "^3.5.10",
|
||||
"@angular/common": "^13.3.5",
|
||||
"@angular/core": "^13.3.5",
|
||||
"@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-dom": "^18.0.0",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"react-easy-swipe": "^0.0.22",
|
||||
"react-tiny-oembed": "^1.1.0",
|
||||
"redaxios": "^0.4.1",
|
||||
"redux": "^4.1.2",
|
||||
"redaxios": "^0.5.0",
|
||||
"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",
|
||||
"babel-loader": "^8.2.4",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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 = `${items.length * itemWidth }px`;
|
||||
el.querySelector('.carousel-inner').style.width = `${numberOfItems * 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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue