Add slick-carousel instead of homemade one

UI/Image/SlideShow.ts

@@ -1,86 +1,32 @@
 import {UIEventSource} from "../../Logic/UIEventSource";
 import {UIElement} from "../UIElement";
 import Combine from "../Base/Combine";
-import Svg from "../../Svg";
+// @ts-ignore
+import $ from "jquery"
 
 export class SlideShow extends UIElement {
 
     private readonly _embeddedElements: UIEventSource<UIElement[]>
 
-    public readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
-    private _prev: UIElement;
-    private _next: UIElement;
-
     constructor(
         embeddedElements: UIEventSource<UIElement[]>) {
         super(embeddedElements);
         this._embeddedElements = embeddedElements;
-        this.ListenTo(this._currentSlide);
-        this._embeddedElements
-            .stabilized(1000)
-            .addCallback(embedded => {
-                // Always move to the last image - but at most once per second
-                this._currentSlide.setData(this._embeddedElements.data.length - 1);
-            });
-
-        this.dumbMode = false;
-        const self = this;
-        this._prev = new Combine([
-            "<div class='vspan'></div>",
-            Svg.arrow_left_smooth_img])
-            .SetClass("prev-button")
-            .onClick(() => {
-                const current = self._currentSlide.data;
-                self.MoveTo(current - 1);
-            });
-        this._next = new Combine([
-            "<div class='vspan'></div>",
-            Svg.arrow_right_smooth_img])
-            .SetClass("next-button")
-            .onClick(() => {
-                const current = self._currentSlide.data;
-                self.MoveTo(current + 1);
-            });
+        this._embeddedElements.addCallbackAndRun(elements => {
+            for (const element of elements ?? []) {
+                element.SetClass("slick-carousel-content")
+            }
+        })
 
     }
 
     InnerRender(): string {
-        if (this._embeddedElements.data.length == 0) {
-            return "";
-        }
-
-        if (this._embeddedElements.data.length == 1) {
-            return "<div class='image-slideshow'><div class='slides'><div class='slide'>" +
-                this._embeddedElements.data[0].Render() +
-                "</div></div></div>";
-        }
-
-
-        let slides = ""
-        for (let i = 0; i < this._embeddedElements.data.length; i++) {
-            let embeddedElement = this._embeddedElements.data[i];
-            let state = "hidden"
-            if (this._currentSlide.data === i) {
-                state = "active-slide";
-            }
-            slides += "      <div class=\"slide " + state + "\">" + embeddedElement.Render() + "</div>\n";
-        }
-        return new Combine([
-             this._prev
-            , "<div class='slides'>", slides, "</div>"
-            , this._next])
-            .SetClass('image-slideshow')
+        return new Combine(
+                this._embeddedElements.data,
+            ).SetClass("block slick-carousel")
             .Render();
     }
 
-    public MoveTo(index: number) {
-        if (index < 0) {
-            index = this._embeddedElements.data.length - 1;
-        }
-        index = index % this._embeddedElements.data.length;
-        this._currentSlide.setData(index);
-    }
-    
     Update() {
         super.Update();
         for (const uiElement of this._embeddedElements.data) {
@@ -88,4 +34,22 @@ export class SlideShow extends UIElement {
         }
     }
 
+    protected InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        require("slick-carousel")
+        if(this._embeddedElements.data.length == 0){
+            return;
+        }
+        $('.slick-carousel').not('.slick-initialized').slick({
+            //   autoplay: true,
+            arrows: true,
+            dots: true,
+            lazyLoad: 'progressive',
+            variableWidth: true,
+            centerMode: true,
+            centerPadding: "60px",
+            adaptive: true  
+        });
+    }
+
 }