FIX: Glide init and mount event

This commit is contained in:
Tony Air 2024-01-26 17:28:30 +02:00
parent e88744b293
commit 89bfbe6c9f
2 changed files with 18 additions and 4 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react", "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.", "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>", "author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause", "license": "BSD-2-Clause",

View File

@ -3,11 +3,18 @@ import "../../scss/ui/glide.theme.scss";
import Glide from '@glidejs/glide' import Glide from '@glidejs/glide'
import Events from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_events' import Events from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_events'
const NAME = 'uiGlide'
const init = () => { const init = () => {
console.log(`Glide init`); console.log(`${NAME} init`)
document.querySelectorAll('.glide').forEach((el) => { document.querySelectorAll('.glide').forEach((el) => {
if (el.dataset.glide) {
return
}
el.dataset.glide = true
const cfg = el.dataset; const cfg = el.dataset;
if (cfg.perView === 1 && cfg.bsIndicators) { if (cfg.perView === 1 && cfg.bsIndicators) {
@ -47,7 +54,7 @@ const init = () => {
el.append(btns); el.append(btns);
} }
new Glide(el, { const glide = new Glide(el, {
startAt: 0, startAt: 0,
type: 'carousel', type: 'carousel',
perView: cfg.perView, perView: cfg.perView,
@ -57,7 +64,14 @@ const init = () => {
768: { perView: 1 }, 768: { perView: 1 },
992: { perView: parseInt(cfg.perView / 2) }, 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();
}); });
}; };