Add perPage functionality

src/ImageCarousel.svelte

@@ -15,6 +15,10 @@
    * Infinite looping
    */
   export let infinite	= true;
+
+
+  export let perPage = 3;
+
   
   let contentContainerElement
   let innerContentContainerElement
@@ -27,21 +31,36 @@
     children = innerContentContainerElement.children
     console.log('children', children.length)
     w = contentContainerElement.clientWidth
+
+    let pageIndex = 0;
+    let pagesCount = Math.ceil(children.length/perPage)
+    // TODO: add event listener on resize
+    const perPageTail = perPage * (1 - pagesCount) + children.length
+    console.log('perPageTail', perPageTail)
     for (let i=0; i<children.length; i++) {
+      pageIndex = Math.floor(i/perPage)
+      // handle tail page where might be less than perPage slides
+      const childWidth = pageIndex === pagesCount - 1 && pagesCount !== 1
+        ? Math.round(w/perPageTail) // last page 
+        : Math.round(w/perPage) // full page children.length - i >= perPage ? Math.round(w/perPage) : Math.round(w/perPageTail)
+      console.log('childWidth', pageIndex === pagesCount - 1, Math.round(w/perPageTail), Math.round(w/perPage))
+      children[i].style.minWidth = `${childWidth}px`
+      children[i].style.maxWidth = `${childWidth}px`
+      console.log('children', w)
       store.setItem()
     }
   })
 
   let offset
   function handlePrevClick() {
-    store.prev({ infinite })
+    store.prev({ infinite, perPage })
-    offset = -$store.currentItemIndex * children[$store.currentItemIndex].clientWidth
+    offset = -$store.currentItemIndex * w // children[$store.currentItemIndex].clientWidth
   }
   function handleNextClick() {
-    store.next({ infinite })
+    store.next({ infinite, perPage })
-    console.log('children.length', children.length, $store.currentItemIndex)
+    // console.log('children.length', children.length, $store.currentItemIndex)
-    offset = -$store.currentItemIndex * children[$store.currentItemIndex].clientWidth
+    offset = -$store.currentItemIndex * w // children[$store.currentItemIndex].clientWidth
-    console.log('offset', offset, children[$store.currentItemIndex].clientWidth)
+    // console.log('offset', offset, children[$store.currentItemIndex].clientWidth)
   }
 </script>
 
@@ -88,8 +107,7 @@
   .content-container > div {
     width: 100%;
     display: flex; /* to put child elements in one row */
-    transition: transform 1s ease-in-out;
+    transition: transform 1s ease-in-out; /* pass transition duration as param */
-    background-color: chocolate;
   }
   .side-container {
     background-color: cornflowerblue;

src/store.js

@@ -7,7 +7,7 @@ import { getNextItemIndexFn, getPrevItemIndexFn } from './utils/item-index'
 
 const initState = {
   items: [],
-  currentItemId: null,
+  // currentItemId: null,
   currentItemIndex: null,
   action: 'next'
 }
@@ -22,7 +22,7 @@ function createStore() {
   function setItem(id = uuid()) {
     update(store => ({
       ...store,
-      currentItemId: id, // TODO: seems is not used at all, can be removed
+      // currentItemId: id, // TODO: seems is not used at all, can be removed
       items: [
         ...store.items,
         id
@@ -44,28 +44,28 @@ function createStore() {
     }))
   }
 
-  function next({ infinite }) {
+  function next({ infinite, perPage }) {
     update(store => {
       const currentItemIndex = store.currentItemIndex // store.items.findIndex(item => item === store.currentItemId)
-      console.log('next old currentItemIndex', currentItemIndex)
+      // console.log('next old currentItemIndex', currentItemIndex)
-      const newCurrentItemIndex = getNextItemIndexFn(infinite)(currentItemIndex, store.items)
+      const newCurrentItemIndex = getNextItemIndexFn(infinite)(currentItemIndex, Math.ceil(store.items.length / perPage))
       // console.log('newCurrentItemIndex', newCurrentItemIndex)
       return {
         ...store,
-        currentItemId: store.items[newCurrentItemIndex],
+        // currentItemId: store.items[newCurrentItemIndex],
         currentItemIndex: newCurrentItemIndex,
         action: 'next'
       }
     })
   }
 
-  function prev({ infinite }) {
+  function prev({ infinite, perPage }) {
     update(store => {
       const currentItemIndex = store.currentItemIndex // store.items.findIndex(item => item === store.currentItemId)
-      const newCurrentItemIndex = getPrevItemIndexFn(infinite)(currentItemIndex, store.items)
+      const newCurrentItemIndex = getPrevItemIndexFn(infinite)(currentItemIndex, Math.ceil(store.items.length / perPage))
       return {
         ...store,
-        currentItemId: store.items[newCurrentItemIndex],
+        // currentItemId: store.items[newCurrentItemIndex],
         currentItemIndex: newCurrentItemIndex,
         action: 'prev'
       }

src/stories/ImageCarouselView.svelte

@@ -36,6 +36,18 @@
     >
       <h1>Element 3</h1>
     </div>
+    <div
+      class="child-content-container"
+      style="background-color: pink;"
+    >
+      <h1>Element 4</h1>
+    </div>
+    <!-- <div
+      class="child-content-container"
+      style="background-color: lightblue;"
+    >
+      <h1>Element 5</h1>
+    </div> -->
   </ImageCarousel>
 </div>
 
@@ -45,7 +57,7 @@
     width: 100%;
   }
   .child-content-container {
-    min-width: 100%;
+    /* min-width: 100%; */
     height: 100px;
     display: flex;
     align-items: center;

src/utils/item-index.js

@@ -1,23 +1,23 @@
-export function getNextItemIndexLimited(currentItemIndex, items) {
+export function getNextItemIndexLimited(currentItemIndex, length) {
-  return Math.min(currentItemIndex + 1, items.length - 1)
+  return Math.min(currentItemIndex + 1, length - 1)
 }
 
-export function getNextItemIndexInfinte(currentItemIndex, items) {
+export function getNextItemIndexInfinte(currentItemIndex, length) {
   const newCurrentItemIndex = currentItemIndex + 1
-  return newCurrentItemIndex > items.length - 1 ? 0 : newCurrentItemIndex
+  return newCurrentItemIndex > length - 1 ? 0 : newCurrentItemIndex
 }
 
 export function getNextItemIndexFn(infinite) {
   return infinite ? getNextItemIndexInfinte : getNextItemIndexLimited
 }
 
-export function getPrevItemIndexLimited(currentItemIndex, items) {
+export function getPrevItemIndexLimited(currentItemIndex, length) {
   return Math.max(currentItemIndex - 1, 0)
 }
 
-export function getPrevItemIndexInfinte(currentItemIndex, items) {
+export function getPrevItemIndexInfinte(currentItemIndex, length) {
   const newCurrentItemIndex = currentItemIndex - 1
-  return newCurrentItemIndex >= 0 ? newCurrentItemIndex : items.length - 1
+  return newCurrentItemIndex >= 0 ? newCurrentItemIndex : length - 1
 }
 
 export function getPrevItemIndexFn(infinite) {