Allow the carousel 'slide' animation to be disabled.

src/components/carousel.ts

@@ -5,6 +5,7 @@ import EmblaCarousel, {
   EmblaPluginType,
 } from 'embla-carousel';
 
+import { TransitionEffect } from '../types';
 import { dispatchFrigateCardEvent } from '../common';
 
 import carouselStyle from '../scss/carousel.scss';
@@ -22,7 +23,7 @@ export class FrigateCardCarousel extends LitElement {
    * @param index Slide number.
    */
   carouselScrollTo(index: number): void {
-    this._carousel?.scrollTo(index);
+    this._carousel?.scrollTo(index, this._getTransitionEffect() === 'none');
   }
 
   /**
@@ -50,6 +51,14 @@ export class FrigateCardCarousel extends LitElement {
     }
   }
 
+  /**
+   * Get the transition effect to use.
+   * @returns An TransitionEffect object.
+   */
+  protected _getTransitionEffect(): TransitionEffect | undefined {
+    return 'slide';
+  }
+
   /**
    * Get the Embla options to use.
    * @returns An EmblaOptionsType object or undefined for no options.

src/components/live.ts

@@ -18,6 +18,7 @@ import {
   FrigateCardMediaPlayer,
   LiveOverrides,
   LiveProvider,
+  TransitionEffect,
   frigateCardConfigDefaults,
 } from '../types.js';
 import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
@@ -314,6 +315,14 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
     }
   }
 
+  /**
+   * Get the transition effect to use.
+   * @returns An TransitionEffect object.
+   */
+  protected _getTransitionEffect(): TransitionEffect | undefined {
+    return this.liveConfig?.transition_effect;
+  }
+
   /**
    * Get the Embla options to use.
    * @returns An EmblaOptionsType object or undefined for no options.

src/components/media-carousel.ts

@@ -191,9 +191,9 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
    */
   protected _nextPreviousHandler(direction: 'previous' | 'next'): void {
     if (direction == 'previous') {
-      this._carousel?.scrollPrev();
+      this._carousel?.scrollPrev(this._getTransitionEffect() === 'none');
     } else if (direction == 'next') {
-      this._carousel?.scrollNext();
+      this._carousel?.scrollNext(this._getTransitionEffect() === 'none');
     }
   }
 

src/components/viewer.ts

@@ -22,6 +22,7 @@ import type {
   CameraConfig,
   ExtendedHomeAssistant,
   MediaShowInfo,
+  TransitionEffect,
   ViewerConfig,
 } from '../types.js';
 import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
@@ -302,6 +303,14 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
     return slideIndex !== undefined ? Number(slideIndex) : undefined;
   }
 
+  /**
+   * Get the transition effect to use.
+   * @returns An TransitionEffect object.
+   */
+   protected _getTransitionEffect(): TransitionEffect | undefined {
+    return this.viewerConfig?.transition_effect;
+  }
+
   /**
    * Get the Embla options to use.
    * @returns An EmblaOptionsType object or undefined for no options.