{"_id":"@contensu/directus-extension-image-carousel-interface","_rev":"2-9b9b896afdf306420cd930afeb9c8f49","name":"@contensu/directus-extension-image-carousel-interface","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@contensu/directus-extension-image-carousel-interface","version":"1.0.0","keywords":["directus","directus-extension","directus-custom-interface","carousel","gallery","images"],"author":{"name":"contensu-dev"},"license":"MIT","_id":"@contensu/directus-extension-image-carousel-interface@1.0.0","maintainers":[{"name":"contensu-dev","email":"contact@contensu.com"}],"homepage":"https://github.com/contensu/directus-extension-image-carousel-interface","bugs":{"url":"https://github.com/contensu/directus-extension-image-carousel-interface/issues"},"dist":{"shasum":"ef68b141726d0812ffee6cc02a33fc562b6dfc7d","tarball":"https://registry.npmjs.org/@contensu/directus-extension-image-carousel-interface/-/directus-extension-image-carousel-interface-1.0.0.tgz","fileCount":7,"integrity":"sha512-BAcRoMJhhQ1AGRPGj6XJrk/U4WUFUq+t2buTWwtJfhwytthrurT4r/xeI86nJKjhcOgHBhdgoPsxQo6JvApIxA==","signatures":[{"sig":"MEUCIA7YA1KAtAVD/cILP6FGBawt/JnPtMfymGEHj02Nj1DlAiEA7g8thGLl8llPV6dCzdzAwNUoBvCtuBdyUiW57TAPQVQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":141389},"icon":"view_carousel","type":"module","gitHead":"52a2218176a361917e149db153973ddb292969fd","scripts":{"dev":"directus-extension build -w --no-minify","link":"directus-extension link","build":"directus-extension build","validate":"directus-extension validate","typecheck":"vue-tsc --noEmit","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"contensu-dev","email":"contact@contensu.com"},"repository":{"url":"git+https://github.com/contensu/directus-extension-image-carousel-interface.git","type":"git"},"_npmVersion":"10.9.7","description":"A Directus interface that presents the image files linked to an item as a browsable carousel, with thumbnails, autoplay, and keyboard navigation.","directories":{},"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"devDependencies":{"vue":"3.5.24","vue-tsc":"3.3.9","typescript":"5.9.3","@directus/extensions-sdk":"18.0.2"},"directus:extension":{"host":"^10.10.0 || ^11.0.0","path":"dist/index.js","type":"interface","source":"src/index.ts"},"_npmOperationalInternal":{"tmp":"tmp/directus-extension-image-carousel-interface_1.0.0_1785942636079_0.20685883466064725","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@contensu/directus-extension-image-carousel-interface","description":"A Directus interface that presents the image files linked to an item as a browsable carousel, with thumbnails, autoplay, and keyboard navigation.","author":{"name":"contensu-dev"},"license":"MIT","icon":"view_carousel","version":"1.0.1","keywords":["directus","directus-extension","directus-custom-interface","carousel","gallery","images"],"type":"module","directus:extension":{"type":"interface","path":"dist/index.js","source":"src/index.ts","host":"^10.10.0 || ^11.0.0"},"scripts":{"build":"directus-extension build","dev":"directus-extension build -w --no-minify","link":"directus-extension link","validate":"directus-extension validate","typecheck":"vue-tsc --noEmit","prepublishOnly":"pnpm run build","add":"directus-extension add"},"devDependencies":{"@directus/extensions-sdk":"18.0.2","typescript":"5.9.3","vue":"3.5.24","vue-tsc":"3.3.9"},"homepage":"https://github.com/contensu/directus-extension-image-carousel-interface","repository":{"type":"git","url":"git+https://github.com/contensu/directus-extension-image-carousel-interface.git"},"bugs":{"url":"https://github.com/contensu/directus-extension-image-carousel-interface/issues"},"_id":"@contensu/directus-extension-image-carousel-interface@1.0.1","gitHead":"546743192af3b44342214ec94b6e1bb13d15bc0c","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-WbVBq29X1XWmK7/95M2rTPi5A72xaNhgcQDJ82bWd8MTLyMPbrFtWEzDVZtLWbvt8l0X02kTgnEF4ZjJn7V5lA==","shasum":"4971a7729e158850b09f92b1b61936c0e9204f2f","tarball":"https://registry.npmjs.org/@contensu/directus-extension-image-carousel-interface/-/directus-extension-image-carousel-interface-1.0.1.tgz","fileCount":4,"unpackedSize":33052,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIChne/1/qH5IWwtq3dX7GHI6N7pn5Hep6ZoQr9WXRgHsAiAmKCACbIwoGU9Cc0bP3/+J05EHvjyufMsIrLfAZKdfHA=="}]},"_npmUser":{"name":"contensu-dev","email":"contact@contensu.com"},"directories":{},"maintainers":[{"name":"contensu-dev","email":"contact@contensu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/directus-extension-image-carousel-interface_1.0.1_1785944230403_0.08026770831537933"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-05T15:10:35.840Z","modified":"2026-08-05T15:37:10.839Z","1.0.0":"2026-08-05T15:10:36.300Z","1.0.1":"2026-08-05T15:37:10.575Z"},"bugs":{"url":"https://github.com/contensu/directus-extension-image-carousel-interface/issues"},"author":{"name":"contensu-dev"},"license":"MIT","homepage":"https://github.com/contensu/directus-extension-image-carousel-interface","keywords":["directus","directus-extension","directus-custom-interface","carousel","gallery","images"],"repository":{"type":"git","url":"git+https://github.com/contensu/directus-extension-image-carousel-interface.git"},"description":"A Directus interface that presents the image files linked to an item as a browsable carousel, with thumbnails, autoplay, and keyboard navigation.","maintainers":[{"name":"contensu-dev","email":"contact@contensu.com"}],"readme":"# @contensu/directus-extension-image-carousel-interface\n\nA Directus interface for **Files (M2M)** fields that presents the linked image files as a browsable carousel with a full-screen lightbox.\n\n![The gallery field: counter, navigation arrows, dot indicators, caption, and the thumbnail strip](https://raw.githubusercontent.com/contensu/directus-extension-image-carousel-interface/main/docs/images/carousel.png)\n\n## Install\n\nOpen **Settings → Marketplace** in Directus, search for `@contensu/directus-extension-image-carousel-interface`, and press **Install**. Directus unpacks the extension and reloads on its own — no restart required.\n\nIf a self-hosted instance refuses the install, it is running the default `MARKETPLACE_TRUST=sandbox`; set `MARKETPLACE_TRUST=all` to allow it.\n\nThen create or edit a field and pick **Image Carousel** under *Interface*.\n\n## Features\n\n- Main stage with previous/next navigation, counter, optional dot indicators and caption\n- **Full screen**: expand button, double-click, or the `F` key opens a lightbox that fills the screen (native Fullscreen API, with an overlay fallback when the browser blocks it)\n- **Zoom and pan** in full screen: scroll to zoom toward the cursor, drag to pan, double-click to toggle, `+` / `−` / `0` on the keyboard\n- Swipe left/right on touch and pen\n- Thumbnail strip that scrolls the active image into view\n- Fade, slide, or no transition between images\n- Optional looping — off, navigation stops at the first and last image\n- Optional autoplay, paused on hover and while the lightbox is open\n- Keyboard: `←` / `→` to move, `F` for full screen, `Esc` to close\n- Neighbouring images are preloaded, so navigation does not flash\n- Respects the junction table's sort field\n- Shows staged (not-yet-saved) file selections alongside saved ones\n- Non-image files linked to the same field are silently skipped\n- Honours `prefers-reduced-motion`\n\n## Full screen\n\nPress `F`, double-click the stage, or use the expand button. The lightbox fills the screen with the title, counter, zoom controls, download, and a thumbnail rail. `Esc` returns to the form in one press.\n\n![The full-screen lightbox with title, zoom controls, navigation arrows, and thumbnail rail](https://raw.githubusercontent.com/contensu/directus-extension-image-carousel-interface/main/docs/images/lightbox.png)\n\nScroll to zoom toward the cursor and drag to pan; the current magnification is shown in the toolbar.\n\n![The same image zoomed to 249% and panned, showing a detail crop](https://raw.githubusercontent.com/contensu/directus-extension-image-carousel-interface/main/docs/images/zoom.png)\n\n## Options\n\n| Option | Default | Description |\n| --- | --- | --- |\n| Aspect Ratio | `16 / 9` | Shape of the main stage (16:9, 4:3, 1:1, 3:4, 21:9) |\n| Image Fit | `contain` | `contain` letterboxes, `cover` fills the frame. Full screen always uses `contain` |\n| Transition | `fade` | `fade`, `slide`, or `none` |\n| Loop | `true` | Wrap around at the ends |\n| Show Thumbnails | `true` | Thumbnail strip below the stage |\n| Show Dot Indicators | `false` | Dots overlaid on the stage |\n| Show Counter | `true` | \"3 / 5\" badge |\n| Show Caption | `false` | Overlays the file title |\n| Enable Full Screen | `true` | Expand button, double-click, and `F` |\n| Enable Zoom | `true` | Scroll-to-zoom and drag-to-pan in full screen |\n| Autoplay | `false` | Advance automatically |\n| Autoplay Interval | `5000` ms | Time between slides (min 1000 ms) |\n\n## Notes\n\n- This interface is **presentational**: it displays the linked images but does not add or remove them. Manage the files themselves with the standard *Files* interface (for example in a different tab or detail group), or via the API.\n- Use it on a field with local type **files** — the M2M relation to `directus_files` that the field wizard creates.\n\n## Versions\n\nEvery dependency is pinned to an exact version — no `^` ranges. Two of them are\nload-bearing:\n\n- **`vue` must match the copy `@directus/extensions-sdk` resolves internally**\n  (3.5.24 for SDK 18.0.2). A caret lets a newer vue in alongside it, and\n  `vue-tsc` then compares component types across the two instances and crashes\n  mid-elaboration instead of reporting an error. `pnpm why vue` must say\n  *Found 1 version*.\n- **`typescript` stays on 5.x** — `vue-tsc` 3.x cannot drive TS 6 (internal tsc\n  crash) or TS 7 (no `./lib/tsc` export). The extension build itself uses\n  esbuild and does not care; only `pnpm typecheck` does.\n\nThe `directus:extension.host` field is deliberately still a range: it declares\nwhich Directus versions this extension supports, not a dependency to install.\n\n## Development\n\nA Docker Compose stack runs the extension inside a real Directus while you build it:\n\n```sh\npnpm install\npnpm dev            # rebuilds dist/ on every save\ndocker compose up   # http://localhost:8055 — admin@example.com / d1r3ctu5\n```\n\n`dist/` and `package.json` are mounted into the container's extensions folder and\n`EXTENSIONS_AUTO_RELOAD` is on, so saving a file rebuilds the bundle and Directus\nreloads it — refresh the browser to see the change.\n\nThen create a field using the **Image Carousel** interface to try it out.\n\n```sh\npnpm typecheck      # vue-tsc\npnpm validate       # directus-extension validate\n```\n\n---\n\n## CI & Releases\n\nEvery push runs typecheck, build, and extension validation via GitHub Actions.\nReleases are published to npm manually:\n\n```sh\npnpm build\nnpm publish --access public\n```\n\n---\n\n## Contributing\n\nPull requests are welcome. Please open an issue first to discuss what you would like to change.\n\n---\n\n## License\n\nMIT © Contensu\n","readmeFilename":"README.md"}