From b77e85cf74d2ea13bdacc63f2b6a6380ead48361 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Tue, 19 Jan 2021 22:12:12 +0300
Subject: [PATCH] Add event handlers

---
 src/ImageCarousel.svelte | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel.svelte
index de62788..48c2b20 100644
--- a/src/ImageCarousel.svelte
+++ b/src/ImageCarousel.svelte
@@ -1,22 +1,42 @@
 <script>
+  import { onMount } from 'svelte'
   /**
    * Enable Next/Previos arrows
    */
-	export let arrows = true;
+  export let arrows = true;
+  
+  let contentContainerElement
+  let children
+  onMount(() => {
+    children = contentContainerElement.children
+  })
+
+  function handleLeftClick() {
+    // TODO: implement
+  }
+  function handleRightClick() {
+    // TODO: implement
+  }
 </script>
 
 <div class="main-container">
   {#if arrows}
   <div class="side-container">
-    <span class="clickable">&lt;</span>
+    <span
+      class="clickable"
+      on:click={handleLeftClick}
+    >&lt;</span>
   </div>
   {/if}
-  <div class="content-container">
+  <div class="content-container" bind:this={contentContainerElement}>
     <slot></slot>
   </div>
   {#if arrows}
   <div class="side-container">
-    <span class="clickable">&gt;</span>
+    <span
+      class="clickable"
+      on:click={handleRightClick}
+    >&gt;</span>
   </div>
   {/if}
 </div>
@@ -28,6 +48,7 @@
   }
   .content-container {
     flex: 1;
+    display: flex;
   }
   .side-container {
     background-color: cornflowerblue;