Merge pull request #8 from node-projects/feature/slidershow

Feature/slidershow

Author: cedricfranke28

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-projects/automatic-slidershow-webcomponent",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "type": "module",
   "private": false,

package.json

@@ -9,6 +9,9 @@ export default class SliderShowPlacementService extends DefaultPlacementService
     }
 
     override enterContainer(container: IDesignItem, items: IDesignItem[]) {
+
+        super.enterContainer(container, items);
+
         for (let i of items) {
             if (i.hasStyle('position'))
                 i.removeStyle('position');

src/designer/SliderShowPlacementService.ts

@@ -130,11 +130,16 @@ export class AutomaticSliderShowWebcomponent extends BaseCustomWebComponentConst
         this._showSlides();
     }
 
-    _refreshContent() {
+    private _refreshContent() {
         this._dots.innerHTML = "";
         this._slideIndex = 0;
     }
 
+    setSlideIndex(index: number) {
+        this._slideIndex = index;
+        this._showSlides();
+    }
+
     private _showSlides() {
         if (this._slideIndex >= this.children.length) {
             this._slideIndex = 0;
@@ -146,11 +151,14 @@ export class AutomaticSliderShowWebcomponent extends BaseCustomWebComponentConst
             const dotElement = document.createElement('div');
             dotElement.className = "dot-element";
             dotElement.id = "dot-element-" + count;
+            dotElement.addEventListener('click', () => this.setSlideIndex(index));
             this._dots.appendChild(dotElement);
             count++;
         }
 
-        (<HTMLDivElement>this._dots.children[this._slideIndex]).classList.add("dot-active");
+        if ((<HTMLDivElement>this._dots).children.length != 0) {
+            (<HTMLDivElement>this._dots.children[this._slideIndex]).classList.add("dot-active");
+        }
 
         let i = 0;
         for (const item of this.children as any as HTMLElement[]) {