Merge pull request #37 from johnyvelho/fix/dots

Generating and activating Dots properly
beyonk-group · Jun 24, 2020 · 7c67f2e · 7c67f2e
2 parents 2076437 + 26eb4c0
commit 7c67f2e
Show file tree

Hide file tree

Showing 3 changed files with 595 additions and 40 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.mjs b/dist/index.mjs
diff --git a/src/Carousel.svelte b/src/Carousel.svelte
@@ -8,8 +8,8 @@
 	</div>
     {#if dots}
 	<ul>
-		{#each pips as pip, i}
-		<li on:click={() => go(i)} class={currentIndex === i ? "active" : ""}></li>
+		{#each {length: totalDots} as _, i}
+		<li on:click={() => go(i*perPage)} class={isDotActive(currentIndex, i) ? "active" : ""}></li>
 		{/each}
 	</ul>
     {/if}
@@ -100,6 +100,7 @@
 	const dispatch = createEventDispatcher()
 
 	$: pips = controller ? controller.innerElements : []
+	$: totalDots = controller ? Math.ceil(controller.innerElements.length / perPage) : []
 	
 	onMount(() => {
 		controller = new Siema({
@@ -125,6 +126,11 @@
 			controller.destroy()
 		}
 	})
+
+	export function isDotActive (currentIndex, dotIndex) {
+        if (currentIndex < 0) currentIndex = pips.length + currentIndex;
+        return currentIndex >= dotIndex*perPage && currentIndex < (dotIndex*perPage)+perPage
+    }
 	
 	export function left () {
 		controller.prev()