Add wheel gestures and fix scrolling issue.

src/components/carousel.ts

@@ -6,6 +6,7 @@ import EmblaCarousel, {
   EmblaOptionsType,
   EmblaPluginType,
 } from 'embla-carousel';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
 
 import { TransitionEffect } from '../types';
 import { dispatchFrigateCardEvent } from '../common';
@@ -76,8 +77,12 @@ export class FrigateCardCarousel extends LitElement {
    * Get the Embla plugins to use.
    * @returns An EmblaOptionsType object or undefined for no options.
    */
-  protected _getPlugins(): EmblaPluginType[] | undefined {
-    return undefined;
+  protected _getPlugins(): EmblaPluginType[] {
+    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

@@ -344,8 +344,9 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
    * Get the Embla plugins to use.
    * @returns An EmblaOptionsType object or undefined for no options.
    */
-  protected _getPlugins(): EmblaPluginType[] | undefined {
+  protected _getPlugins(): EmblaPluginType[] {
     return [
+      ...super._getPlugins(),
       Lazyload({
         lazyloadCallback: this.liveConfig?.lazy_load
           ? (...args) => this._lazyloadOrUnloadSlide('load', ...args)

src/components/viewer.ts

@@ -331,8 +331,9 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
    * Get the Embla plugins to use.
    * @returns An EmblaOptionsType object or undefined for no options.
    */
-  protected _getPlugins(): EmblaPluginType[] | undefined {
+  protected _getPlugins(): EmblaPluginType[] {
     return [
+      ...super._getPlugins(),
       Lazyload({
         lazyloadCallback: this.viewerConfig?.lazy_load
           ? this._lazyloadSlide.bind(this)