Add lazy loading

src/components/Carousel/Carousel.svelte

@@ -66,6 +66,14 @@
   let pageWindowElement
   let pagesElement
 
+  // used for lazy loading images, preloaded only current, adjacent and cloanable images
+  $: loaded = [
+    ...new Set([
+      0, originalPagesCount-1,
+      originalCurrentPageIndex - 1, originalCurrentPageIndex, originalCurrentPageIndex + 1
+    ])
+  ].filter(index => index >= 0)
+
   function applyPageSizes() {
     const children = pagesElement.children
     pageWidth = pageWindowElement.clientWidth
@@ -197,10 +205,7 @@
         "
         bind:this={pagesElement}
       >
-        <slot
+        <slot {loaded}></slot>
-          currentPageIndex={originalCurrentPageIndex}
-        >
-        </slot>
       </div>    
     </div>
     {#if arrows}

src/docs/AlbumsPreview/AlbumsPreview.svelte

@@ -9,7 +9,10 @@
       images: [
         'https://cdn.pixabay.com/photo/2017/04/09/09/56/avenue-2215317_1280.jpg',
         'https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477_1280.jpg',
-        'https://cdn.pixabay.com/photo/2016/08/11/23/55/trees-1587301_1280.jpg'
+        'https://cdn.pixabay.com/photo/2016/08/11/23/55/trees-1587301_1280.jpg',
+        'https://cdn.pixabay.com/photo/2016/08/16/19/09/forest-1598756_1280.jpg',
+        'https://cdn.pixabay.com/photo/2016/11/29/07/12/forest-1868028_1280.jpg',
+        'https://cdn.pixabay.com/photo/2015/03/26/09/45/woods-690257_1280.jpg'
       ]
     },
     birds: {
@@ -50,12 +53,17 @@
       <Carousel
         let:showPrevPage
         let:showNextPage
+        let:loaded
       >
         <div slot="prev" class="album-arrow album-arrow-prev" on:click={showPrevPage}>
           <i />
         </div>
         {#each album.images as imageSrc, imageIndex (imageSrc)}
-          <Image src={imageSrc} alt={album.title} />
+          <Image
+            src={imageSrc}
+            alt={album.title}
+            loaded={loaded.includes(imageIndex)}
+          />
         {/each}
         <div slot="next" class="album-arrow album-arrow-next" on:click={showNextPage}>
           <i />

src/docs/AlbumsPreview/Image.svelte

@@ -1,10 +1,13 @@
 <script>
   export let src
   export let alt
+  export let loaded
 </script>
 
 <div class="image-container">
-  <img {src} {alt} />
+  {#if loaded}
+    <img {src} {alt} />
+  {/if}
 </div>
 
 <style>

src/docs/Layouts/Main.svelte

@@ -17,7 +17,7 @@
 }
 @media screen and (min-width: 0px) {
   .docs__main-layout__content-inner-container {
-    width: 100%;
+    width: 95%;
   }
 }
 @media screen and (min-width: 768px) {
@@ -35,4 +35,4 @@
     width: 50%;
   }
 }
-</style>
+</style>