Add base styles

src/ImageCarousel.svelte

@@ -1,10 +1,44 @@
 <script>
-	export let title = 'Hello';
+  /**
+   * Enable Next/Previos arrows
+   */
+	export let arrows = true;
 </script>
 
-<main>
+<div class="main-container">
-	<h1>{title}</h1>
+  {#if arrows}
-</main>
+  <div class="side-container">
+    <span class="clickable">&lt;</span>
+  </div>
+  {/if}
+  <div class="content-container">
+    <slot></slot>
+  </div>
+  {#if arrows}
+  <div class="side-container">
+    <span class="clickable">&gt;</span>
+  </div>
+  {/if}
+</div>
 
 <style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+  .content-container {
+    flex: 1;
+  }
+  .side-container {
+    background-color: cornflowerblue;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .clickable {
+    cursor: pointer;
+  }
 </style>

src/stories/ImageCarousel.stories.js

@@ -1,19 +1,19 @@
-import ImageCarousel from './ImageCarousel.svelte';
+import ImageCarouselView from './ImageCarouselView.svelte';
 
 export default {
   title: 'ImageCarousel',
-  component: ImageCarousel,
+  component: ImageCarouselView,
   argTypes: {
-    title: { control: 'text' },
+    arrows: { control: 'boolean' },
   },
 };
 
 const Template = ({ ...args }) => ({
-  Component: ImageCarousel,
+  Component: ImageCarouselView,
   props: args,
 });
 
 export const Primary = Template.bind({});
 Primary.args = {
-  title: 'This is a title'
+  arrows: true
 };

src/stories/ImageCarouselView.svelte

@@ -0,0 +1,22 @@
+<script>
+  import ImageCarousel from '../ImageCarousel.svelte'
+
+  /**
+   * Enable Next/Previos arrows
+   */
+	export let arrows = true;
+</script>
+
+<div class="main-container">
+  <ImageCarousel {arrows} >
+    <h1>Element 1</h1>
+    <h1>Element 2</h1>
+  </ImageCarousel>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+</style>