Skeleton live carousel.

src/components/carousel.ts

@@ -1,9 +1,4 @@
-import {
-  CSSResultGroup,
-  LitElement,
-  unsafeCSS,
-  PropertyValues,
-} from 'lit';
+import { CSSResultGroup, LitElement, unsafeCSS, PropertyValues } from 'lit';
 import EmblaCarousel, { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
 
 import { dispatchFrigateCardEvent } from '../common';
@@ -15,7 +10,6 @@ export interface CarouselSelect {
 }
 
 export class FrigateCardCarousel extends LitElement {
-  protected _options?: EmblaOptionsType;
   protected _carousel?: EmblaCarouselType;
 
   /**
@@ -41,11 +35,17 @@ export class FrigateCardCarousel extends LitElement {
   updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
-    if (!this._carousel) {
-      this.updateComplete.then(() => {
-        this._loadCarousel();
-      });
-    }
+    this.updateComplete.then(() => {
+      this._loadCarousel();
+    });
+  }
+
+  /**
+   * Get the Embla options to use.
+   * @returns An EmblaOptionsType object or undefined for no options.
+   */
+  protected _getOptions(): EmblaOptionsType | undefined {
+    return undefined;
   }
 
   /**
@@ -56,8 +56,11 @@ export class FrigateCardCarousel extends LitElement {
       '.embla__viewport',
     ) as HTMLElement;
 
-    if (!this._carousel && carouselNode) {
-      this._carousel = EmblaCarousel(carouselNode, this._options);
+    if (carouselNode) {
+      if (this._carousel) {
+        this._carousel.destroy();
+      }
+      this._carousel = EmblaCarousel(carouselNode, this._getOptions());
       this._carousel.on('init', () => dispatchFrigateCardEvent(this, 'carousel:init'));
       this._carousel.on('select', () => {
         const selected = this.carouselSelected();