Don't use wheel plugin when there's only one media item.

src/components/carousel.ts

@@ -3,7 +3,6 @@ import EmblaCarousel, {
   EmblaOptionsType,
   EmblaPluginType
 } from 'embla-carousel';
-import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
 import { CSSResultGroup, LitElement, PropertyValues, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import carouselStyle from '../scss/carousel.scss';
@@ -72,16 +71,10 @@ export class FrigateCardCarousel extends LitElement {
 
   /**
    * Get the Embla plugins to use.
-   * @returns An EmblaOptionsType object or undefined for no options.
+   * @returns A list of EmblaOptionsTypes.
    */
   protected _getPlugins(): EmblaPluginType[] {
-    return [
+    return [];
-      WheelGesturesPlugin({
-        // Whether the carousel is vertical or horizontal, interpret y-axis wheel
-        // gestures as scrolling for the carousel.
-        forceWheelAxis: 'y',
-      }),
-    ];
   }
 
   protected _destroyCarousel(): void {

src/components/live.ts

@@ -2,6 +2,7 @@ import JSMpeg from '@cycjimmy/jsmpeg-player';
 import { Task } from '@lit-labs/task';
 import { HomeAssistant } from 'custom-card-helpers';
 import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
 import {
   CSSResultGroup,
   html,
@@ -287,11 +288,21 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
 
   /**
    * Get the Embla plugins to use.
-   * @returns An EmblaOptionsType object or undefined for no options.
+   * @returns A list of EmblaOptionsTypes.
    */
   protected _getPlugins(): EmblaPluginType[] {
     return [
       ...super._getPlugins(),
+      // Only enable wheel plugin if there is more than one camera.
+      ...(this.cameras && this.cameras.size > 1
+        ? [
+            WheelGesturesPlugin({
+              // Whether the carousel is vertical or horizontal, interpret y-axis wheel
+              // gestures as scrolling for the carousel.
+              forceWheelAxis: 'y',
+            }),
+          ]
+        : []),
       Lazyload({
         ...(this.liveConfig?.lazy_load && {
           lazyLoadCallback: (index, slide) =>
@@ -893,7 +904,7 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
           e instanceof FrigateCardError
             ? e.message
             : localize('error.webrtc_card_reported_error') + ': ' + (e as Error).message,
-          (e as FrigateCardError).context
+          (e as FrigateCardError).context,
         );
       }
       return html`${webrtcElement}`;

src/components/thumbnail-carousel.ts

@@ -1,4 +1,5 @@
-import { EmblaOptionsType } from 'embla-carousel';
+import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
 import { CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -100,6 +101,22 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
     };
   }
 
+  /**
+   * Get the Embla plugins to use.
+   * @returns A list of EmblaOptionsTypes.
+   */
+  protected _getPlugins(): EmblaPluginType[] {
+    return [
+      ...super._getPlugins(),
+      // Only enable wheel plugin if there is more than one camera.
+      WheelGesturesPlugin({
+        // Whether the carousel is vertical or horizontal, interpret y-axis wheel
+        // gestures as scrolling for the carousel.
+        forceWheelAxis: 'y',
+      }),
+    ];
+  }
+
   /**
    * Get slides to include in the render.
    * @returns The slides to include in the render.

src/components/viewer.ts

@@ -1,5 +1,6 @@
 import { Task } from '@lit-labs/task';
 import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
 import {
   CSSResultGroup,
   html,
@@ -296,11 +297,24 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
 
   /**
    * Get the Embla plugins to use.
-   * @returns An EmblaOptionsType object or undefined for no options.
+   * @returns A list of EmblaOptionsTypes.
    */
   protected _getPlugins(): EmblaPluginType[] {
     return [
       ...super._getPlugins(),
+      // Only enable wheel plugin if there is more than one media item.
+      ...(this.view &&
+      this.view.target &&
+      this.view.target.children &&
+      this.view.target.children.length > 1
+        ? [
+            WheelGesturesPlugin({
+              // Whether the carousel is vertical or horizontal, interpret y-axis wheel
+              // gestures as scrolling for the carousel.
+              forceWheelAxis: 'y',
+            }),
+          ]
+        : []),
       Lazyload({
         ...(this.viewerConfig?.lazy_load && {
           lazyLoadCallback: this._lazyloadSlide.bind(this),