#69 : Update adjacent indexes

src/components/Carousel/Carousel.svelte

@@ -18,12 +18,13 @@
     applyClones,
     getPageSizes,
     applyPageSizes,
-    getCurrentPageIndexWithoutClones,
+    getCurrentScrollIndex,
     getPagesCountWithoutClones,
     getClonesCount,
     getPartialPageSize,
     getScrollsCount,
     getPageIndexByScrollIndex,
+    getIndexesOfPagesWithoutClonesInScroll,
   } from '../../utils/page'
   import { get } from '../../utils/object'
   import { ProgressManager } from '../../utils/ProgressManager'
@@ -152,14 +153,14 @@
   })
 
   let currentPageIndex = 0
-  $: currentPageIndexWithoutClones = getCurrentPageIndexWithoutClones({
+  $: currentScrollIndex = getCurrentScrollIndex({
     currentPageIndex,
     pagesCount,
     headClonesCount: clonesCount.head,
     infinite,
     pagesToScroll,
   })
-  $: dispatch('pageChange', currentPageIndexWithoutClones)
+  $: dispatch('pageChange', currentScrollIndex)
 
   let pagesCount = 0
   let pagesCountWithoutClones = 1
@@ -198,10 +199,12 @@
 
   // used for lazy loading images, preloaded only current, adjacent and cloanable images
   $: loaded = getAdjacentIndexes({
-    pageIndex: currentPageIndexWithoutClones,
+    scrollIndex: currentScrollIndex,
+    scrollsCount,
     pagesCount: pagesCountWithoutClones,
-    infinite,
-  })
+    pagesToShow,
+    pagesToScroll,
+  }).pageIndexes
 
   function initPageSizes() {
     const sizes = getPageSizes({
@@ -274,8 +277,27 @@
           pagesCountWithoutClones,
         })
         // load first and last child to clone them
-        // TODO: update
-        loaded = [0, pagesContainer.children.length - 1]
+
+        scrollsCount = getScrollsCount({
+          infinite,
+          pagesCountWithoutClones,
+          pagesToScroll,
+        })
+
+        loaded = [
+          ...getIndexesOfPagesWithoutClonesInScroll({
+            scrollIndex: 0,
+            pagesToShow,
+            pagesToScroll,
+            pagesCount: pagesCountWithoutClones,
+          }),
+          ...getIndexesOfPagesWithoutClonesInScroll({
+            scrollIndex: scrollsCount - 1,
+            pagesToShow,
+            pagesToScroll,
+            pagesCount: pagesCountWithoutClones,
+          }),
+        ]
         await tick()
         infinite && addClones()
 
@@ -424,7 +446,7 @@
         <div class="sc-carousel__arrow-container">
           <Arrow
             direction="prev"
-            disabled={!infinite && currentPageIndexWithoutClones === 0}
+            disabled={!infinite && currentScrollIndex === 0}
             on:click={showPrevPage}
           />
         </div>
@@ -468,7 +490,7 @@
         <div class="sc-carousel__arrow-container">
           <Arrow
             direction="next"
-            disabled={!infinite && currentPageIndexWithoutClones === scrollsCount - 1}
+            disabled={!infinite && currentScrollIndex === scrollsCount - 1}
             on:click={showNextPage}
           />
         </div>
@@ -478,13 +500,13 @@
   {#if dots}
     <slot
       name="dots"
-      currentPageIndex={currentPageIndexWithoutClones}
+      currentPageIndex={currentScrollIndex}
       pagesCount={pagesCountWithoutClones}
       showPage={handlePageChange}
     >
       <Dots
         pagesCount={scrollsCount}
-        currentPageIndex={currentPageIndexWithoutClones}
+        currentPageIndex={currentScrollIndex}
         on:pageChange={event => handlePageChange(event.detail)}
       ></Dots>
     </slot>

src/utils/page.js

@@ -59,26 +59,49 @@ export function getPageIndex({
   return pageIndex < 0 ? 0 : Math.min(pageIndex, pagesCount - 1)
 }
 
-export function getAdjacentIndexes({
-  pageIndex,
+export function getIndexesOfPagesWithoutClonesInScroll({
+  scrollIndex,
+  pagesToShow,
+  pagesToScroll,
   pagesCount,
-  infinite,
 }) {
-  if (pagesCount < 1) throw new Error('pagesCount must be at least 1')
-  const _pageIndex = Math.max(0, Math.min(pageIndex, pagesCount - 1))
-  let rangeStart = _pageIndex - 1;
-  let rangeEnd = _pageIndex + 1;
-  rangeStart = rangeStart < 0
-    ? infinite
-      ? pagesCount - 1
-      : 0
-    : rangeStart 
-  rangeEnd = rangeEnd > pagesCount - 1
-    ? infinite
-        ? 0
-        : pagesCount - 1
-    : rangeEnd
-  return [...new Set([rangeStart, rangeEnd, _pageIndex])].sort((a, b) => a - b)
+  const overlap = scrollIndex === 0 ? 0 : pagesToShow - pagesToScroll
+  const from = scrollIndex * pagesToShow - scrollIndex * overlap
+  const to = from + Math.max(pagesToShow, pagesToScroll) - 1
+  console.log('=======>', from, to)
+  const indexes = []
+  for (let i=from; i<=Math.min(pagesCount - 1, to); i++) {
+    indexes.push(i)
+  }
+  return indexes
+}
+
+export function getAdjacentIndexes({
+  scrollIndex,
+  scrollsCount,
+  pagesCount,
+  pagesToShow,
+  pagesToScroll,
+}) {
+  // not checking is infinite or not, as first and last scrolls are always shown to be cloned
+  const _scrollIndex = Math.max(0, Math.min(scrollIndex, scrollsCount - 1))
+  const rangeStart = Math.max(0, _scrollIndex - 1)
+  const rangeEnd = Math.min(_scrollIndex + 1, scrollsCount - 1)
+
+  const scrollIndexes = [...new Set([rangeStart, rangeEnd, _scrollIndex])].sort((a, b) => a - b)
+  const pageIndexes = []
+  scrollIndexes.forEach(scrollIndex => pageIndexes.push(
+    ...getIndexesOfPagesWithoutClonesInScroll({
+      scrollIndex,
+      pagesToShow,
+      pagesToScroll,
+      pagesCount,
+    })
+  ))
+  return {
+    scrollIndexes,
+    pageIndexes: [...new Set(pageIndexes)].sort((a, b) => a - b),
+  }
 }
 
 export function getClones({
@@ -143,7 +166,7 @@ export function applyPageSizes({
   }
 }
 
-export function getCurrentPageIndexWithoutClones({
+export function getCurrentScrollIndex({
   currentPageIndex,
   pagesCount,
   headClonesCount,