diff --git a/package.json b/package.json index e8bf985..9217098 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react", - "version": "5.2.3", + "version": "5.2.4", "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 ", "license": "BSD-2-Clause", diff --git a/src/js/ui/glide.js b/src/js/ui/glide.js index 3db71c2..eeefb3c 100644 --- a/src/js/ui/glide.js +++ b/src/js/ui/glide.js @@ -3,11 +3,18 @@ import "../../scss/ui/glide.theme.scss"; import Glide from '@glidejs/glide' import Events from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_events' +const NAME = 'uiGlide' const init = () => { - console.log(`Glide init`); + console.log(`${NAME} init`) document.querySelectorAll('.glide').forEach((el) => { + if (el.dataset.glide) { + return + } + + el.dataset.glide = true + const cfg = el.dataset; if (cfg.perView === 1 && cfg.bsIndicators) { @@ -47,7 +54,7 @@ const init = () => { el.append(btns); } - new Glide(el, { + const glide = new Glide(el, { startAt: 0, type: 'carousel', perView: cfg.perView, @@ -57,7 +64,14 @@ const init = () => { 768: { perView: 1 }, 992: { perView: parseInt(cfg.perView / 2) }, }, - }).mount(); + }) + + glide.on('mount.after', () => { + el.dispatchEvent(new Event(`${Events.CAROUSEL_READY}`)) + window.dispatchEvent(new Event(`${Events.CAROUSEL_READY}`)) + }) + + glide.mount(); }); };