diff --git a/README.md b/README.md
index d1eafa5b..94373822 100644
--- a/README.md
+++ b/README.md
@@ -130,6 +130,7 @@ All variables listed are under a `event_viewer:` section.
| - | - | - |
| `autoplay_clip` | `false` | Whether or not to autoplay clips in the 'clip' [view](#views). Clips manually chosen in the clips gallery will still autoplay.|
| `lazy_load` | `true` | Whether or not to lazily load media in the event viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load. |
+| `draggable` | `true` | Whether or not the event viewer carousel can be dragged left or right, via touch/swipe and mouse dragging. |
| `controls.next_previous.style` | `thumbnails` | When viewing media, what kind of controls to show to move to the previous/next media item. Acceptable values: `thumbnails`, `chevrons`, `none` . |
| `controls.next_previous.size` | `48px` | The size of the next/previous controls (in CSS Units)[https://www.w3schools.com/cssref/css_units.asp].|
diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index bc4724b8..5c15a70d 100644
--- a/src/components/viewer.ts
+++ b/src/components/viewer.ts
@@ -197,7 +197,7 @@ export class FrigateCardViewerCore extends LitElement {
'.embla__viewport',
) as HTMLElement;
- if (carouselNode) {
+ if (carouselNode && this.viewerConfig) {
this._loadedCarousel = true;
// Start the carousel on the selected child number.
@@ -209,6 +209,7 @@ export class FrigateCardViewerCore extends LitElement {
this._carousel = EmblaCarousel(carouselNode, {
startIndex: isNaN(startIndex) ? undefined : startIndex,
+ draggable: this.viewerConfig.draggable,
});
// Update views and dispatch media-show events based on slide selections.
this._carousel.on('select', this._selectSlideSetViewHandler.bind(this));
diff --git a/src/editor.ts b/src/editor.ts
index 50c720a4..a168b954 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -585,6 +585,17 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
@change=${this._valueChangedHandler}
>
+
+
+
;
const viewerConfigDefault = {
autoplay_clip: false,
lazy_load: true,
+ draggable: true,
controls: {
next_previous: {
size: '48px',
@@ -405,6 +406,7 @@ const viewerConfigSchema = z
.object({
autoplay_clip: z.boolean().default(viewerConfigDefault.autoplay_clip),
lazy_load: z.boolean().default(viewerConfigDefault.lazy_load),
+ draggable: z.boolean().default(viewerConfigDefault.draggable),
controls: z
.object({
next_previous: nextPreviousControlConfigSchema,