Rename perPage => slidesToShow

src/ImageCarousel.svelte

@@ -6,7 +6,7 @@
   import {
     getPageIndex,
     getPagesCount,
-    getPerPageTail,
+    getSlidesToShowTail,
     getSlideSize,
     getIsNotCompletePage
   } from './utils/size'
@@ -22,9 +22,9 @@
   export let infinite = true
 
   /**
-   * Elements per page
+   * Number of slides to show at a time
    */
-  export let perPage = 1
+  export let slidesToShow = 1
 
   /**
    * Page to start on
@@ -47,13 +47,13 @@
     contentContainerWidth = contentContainerElement.clientWidth
 
     const slidesCount = children.length
-    pagesCount = getPagesCount({ slidesCount, perPage })
-    const perPageTail = getPerPageTail({ pagesCount, perPage, slidesCount })
+    pagesCount = getPagesCount({ slidesCount, slidesToShow })
+    const slidesToShowTail = getSlidesToShowTail({ pagesCount, slidesToShow, slidesCount })
 
     for (let slideIndex=0; slideIndex<children.length; slideIndex++) {
-      const pageIndex = getPageIndex({ slideIndex, perPage })
+      const pageIndex = getPageIndex({ slideIndex, slidesToShow })
       const isNotCompletePage = getIsNotCompletePage({ pageIndex, pagesCount })
-      const slideSizePx = getSlideSize({ isNotCompletePage, contentContainerWidth, perPage, perPageTail })
+      const slideSizePx = getSlideSize({ isNotCompletePage, contentContainerWidth, slidesToShow, slidesToShowTail })
       children[slideIndex].style.minWidth = `${slideSizePx}px`
       children[slideIndex].style.maxWidth = `${slideSizePx}px`
     }

src/stories/ImageCarouselView.svelte

@@ -12,9 +12,9 @@
   export let infinite = true;
 
   /**
-   * Elements per page
+   * Number of slides to show at a time
    */
-  export let perPage = 1;
+  export let slidesToShow = 1;
 
   /**
    * Page to start on
@@ -44,7 +44,7 @@
   <ImageCarousel
     {arrows}
     {infinite}
-    {perPage}
+    {slidesToShow}
     {initialPage}
     {speed}
   >

src/utils/size.js

@@ -1,13 +1,13 @@
-export function getPagesCount({ slidesCount, perPage }) {
-  return Math.ceil(slidesCount/perPage)
+export function getPagesCount({ slidesCount, slidesToShow }) {
+  return Math.ceil(slidesCount/slidesToShow)
 }
 
-export function getPerPageTail({
-  perPage,
+export function getSlidesToShowTail({
+  slidesToShow,
   slidesCount,
   pagesCount
 }) {
-  return slidesCount - perPage * (pagesCount - 1)
+  return slidesCount - slidesToShow * (pagesCount - 1)
 }
 
 export function getIsNotCompletePage({
@@ -19,15 +19,15 @@ export function getIsNotCompletePage({
 
 export function getSlideSize({
   contentContainerWidth,
-  perPage,
-  perPageTail,
+  slidesToShow,
+  slidesToShowTail,
   isNotCompletePage
 }) {
   return isNotCompletePage
-    ? Math.round(contentContainerWidth/perPageTail) 
-    : Math.round(contentContainerWidth/perPage)
+    ? Math.round(contentContainerWidth/slidesToShowTail) 
+    : Math.round(contentContainerWidth/slidesToShow)
 }
 
-export function getPageIndex({ slideIndex, perPage }) {
-  return Math.floor(slideIndex/perPage)
+export function getPageIndex({ slideIndex, slidesToShow }) {
+  return Math.floor(slideIndex/slidesToShow)
 }