fix??

js/package.json

@@ -6,7 +6,6 @@
   "dependencies": {
     "@fancyapps/ui": "^5.0.36",
     "@flarum/prettier-config": "^1.0.0",
-    "flarum-tsconfig": "^1.0.2",
     "flarum-webpack-config": "^2.0.0",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0"
@@ -15,6 +14,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
     "babel-loader": "^9.1.3",
+    "flarum-tsconfig": "^1.0.2",
     "prettier": "^2.7.1"
   },
   "scripts": {

js/src/forum/index.js

@@ -2,10 +2,12 @@ import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import CommentPost from 'flarum/forum/components/CommentPost';
 import { Fancybox, Carousel } from '@fancyapps/ui';
+import '@fancyapps/ui/dist/fancybox/fancybox.css';
+import '@fancyapps/ui/dist/carousel/carousel.css';
 
 app.initializers.add('darkle/fancybox', () => {
   extend(CommentPost.prototype, 'oncreate', function () {
-    // Initialize Fancybox for individual images
+    // Handle individual images
     this.element
       .querySelectorAll('.Post-body img:not(.emoji):not(.Avatar):not(.PostMeta-ip img):not([data-reaction]):not([data-link-preview]):not(.flamoji img):not(.countryFlag):not(.no-fancybox)')
       .forEach((node) => {
@@ -17,7 +19,22 @@ app.initializers.add('darkle/fancybox', () => {
         fancyboxEl.appendChild(node);
       });
 
+    // Initialize Fancybox for individual images
     Fancybox.bind('[data-fancybox="gallery"]', {
+      Carousel: {
+        infinite: false,
+      },
+      Slideshow: {
+        playOnStart: true,
+        timeout: 3000,
+      },
+      Toolbar: {
+        display: {
+          left: [],
+          middle: [],
+          right: ["slideshow", "close"],
+        },
+      },
       Images: {
         zoom: false,
       },
@@ -29,6 +46,8 @@ app.initializers.add('darkle/fancybox', () => {
       .forEach((carousel) => {
         new Carousel(carousel, {
           infinite: false,
+          Dots: true,
+          Navigation: true,
         });
       });
   });