Add perPage, initialPage

src/CarouselChild.svelte

@@ -10,10 +10,6 @@
   const id = generateId() 
   onMount(() => {
     store.setItem(id)
-    // console.log(container)
-    return () => {
-      store.removeItem(id)
-    }
   })
 
   let isActive = false

src/ImageCarousel.svelte

@@ -11,21 +11,28 @@
     getIsNotCompletePage
   } from './utils/size'
 
-
   /**
    * Enable Next/Prev arrows
    */
-  export let arrows = true;
+  export let arrows = true
 
   /**
    * Infinite looping
    */
-  export let infinite	= true;
+  export let infinite = true
-
+
-
+  /**
-  export let perPage = 2;
+   * Elements per page
+   */
+  export let perPage = 2
+
+  /**
+   * Page to start on
+   */
+  export let initialPage = 1
 
 
+  let pagesCount = 0
   let contentContainerWidth = 0
   let contentContainerElement
   let innerContentContainerElement
@@ -34,47 +41,47 @@
     const children = innerContentContainerElement.children
     contentContainerWidth = contentContainerElement.clientWidth
 
-    // TODO: add event listener on resize
     const slidesCount = children.length
-    const pagesCount = getPagesCount({ slidesCount, perPage })
+    pagesCount = getPagesCount({ slidesCount, perPage })
     const perPageTail = getPerPageTail({ pagesCount, perPage, slidesCount })
 
-    let pageIndex = 0; // TODO: init value from params
     for (let slideIndex=0; slideIndex<children.length; slideIndex++) {
-      pageIndex = getPageIndex({ slideIndex, perPage })
+      const pageIndex = getPageIndex({ slideIndex, perPage })
       const isNotCompletePage = getIsNotCompletePage({ pageIndex, pagesCount })
       const slideSizePx = getSlideSize({ isNotCompletePage, contentContainerWidth, perPage, perPageTail })
       children[slideIndex].style.minWidth = `${slideSizePx}px`
       children[slideIndex].style.maxWidth = `${slideSizePx}px`
-      store.setItem() // TODO: remove
     }
+    moveToPage(initialPage)
   }
-
-
   
   onMount(() => {
     store.reset() // to init after hot reload
-    store.setCurrentItemIndex(0) // to init index after hot reload, check one more time
     applySlideSizes()
 
     window.addEventListener('resize', applySlideSizes)
-
-
     return () => {
       window.removeEventListener('resize', applySlideSizes)
     }
-
-
   })
 
+  function moveToPage(pageIndex) {
+    store.moveToPage({ pageIndex, pagesCount })
+    applyOffset()
+  }
+
   let offset
-  function handlePrevClick() {
+  function applyOffset() {
-    store.prev({ infinite, perPage })
     offset = -$store.currentItemIndex * contentContainerWidth
   }
+
+  function handlePrevClick() {
+    store.prev({ infinite, pagesCount })
+    applyOffset()
+  }
   function handleNextClick() {
-    store.next({ infinite, perPage })
+    store.next({ infinite, pagesCount })
-    offset = -$store.currentItemIndex * contentContainerWidth
+    applyOffset()
   }
 </script>
 

src/store.js

@@ -1,15 +1,11 @@
 import { writable } from 'svelte/store';
-import { v4 as uuid } from 'uuid'
 import { getNextItemIndexFn, getPrevItemIndexFn } from './utils/item-index'
 
 // TODO: try to split writable store items
 // or try to use immer
 
 const initState = {
-  items: [],
-  // currentItemId: null,
   currentItemIndex: null,
-  action: 'next'
 }
 
 function createStore() {
@@ -19,17 +15,6 @@ function createStore() {
     set(initState)
   }
 
-  function setItem(id = uuid()) {
-    update(store => ({
-      ...store,
-      // currentItemId: id, // TODO: seems is not used at all, can be removed
-      items: [
-        ...store.items,
-        id
-      ]
-    }))
-  }
-
   function setCurrentItemIndex(index) {
     update(store => ({
       ...store,
@@ -37,49 +22,44 @@ function createStore() {
     }))
   }
 
-  function removeItem(id) {
+  function moveToPage({ pageIndex, pagesCount }) {
-    update(store => ({
-      ...store,
-      items: store.items.filter(item => item !== id)
-    }))
-  }
-
-  function next({ infinite, perPage }) {
     update(store => {
-      const currentItemIndex = store.currentItemIndex // store.items.findIndex(item => item === store.currentItemId)
-      // console.log('next old currentItemIndex', currentItemIndex)
-      const newCurrentItemIndex = getNextItemIndexFn(infinite)(currentItemIndex, Math.ceil(store.items.length / perPage))
-      // console.log('newCurrentItemIndex', newCurrentItemIndex)
       return {
         ...store,
-        // currentItemId: store.items[newCurrentItemIndex],
+        currentItemIndex: pageIndex < 0 ? 0 : Math.min(pageIndex, pagesCount - 1),
-        currentItemIndex: newCurrentItemIndex,
-        action: 'next'
       }
     })
   }
 
-  function prev({ infinite, perPage }) {
+  function next({ infinite, pagesCount }) {
     update(store => {
-      const currentItemIndex = store.currentItemIndex // store.items.findIndex(item => item === store.currentItemId)
+      const currentItemIndex = store.currentItemIndex
-      const newCurrentItemIndex = getPrevItemIndexFn(infinite)(currentItemIndex, Math.ceil(store.items.length / perPage))
+      const newCurrentItemIndex = getNextItemIndexFn(infinite)(currentItemIndex, pagesCount)
+      return {
+        ...store,
+        currentItemIndex: newCurrentItemIndex,
+      }
+    })
+  }
+
+  function prev({ infinite, pagesCount }) {
+    update(store => {
+      const currentItemIndex = store.currentItemIndex
+      const newCurrentItemIndex = getPrevItemIndexFn(infinite)(currentItemIndex, pagesCount)
       return {
         ...store,
-        // currentItemId: store.items[newCurrentItemIndex],
         currentItemIndex: newCurrentItemIndex,
-        action: 'prev'
       }
     })
   }
 
   return {
     subscribe,
-    setItem,
-    removeItem,
     next,
     prev,
     setCurrentItemIndex,
-    reset
+    reset,
+    moveToPage,
   };
 }
 

src/stories/ImageCarouselView.svelte

@@ -11,12 +11,24 @@
    * Infinite looping
    */
    export let infinite = true;
+
+  /**
+   * Elements per page
+   */
+  export let perPage = 2;
+
+  /**
+   * Page to start on
+   */
+   export let initialPage = 1
 </script>
 
 <div class="main-container">
   <ImageCarousel
     {arrows}
     {infinite}
+    {perPage}
+    {initialPage}
   >
     <div
       class="child-content-container"