improve(size) Shave more bytes down to 6.25kB

src/components/controller/controller.component.ts

@@ -90,14 +90,13 @@ export default class ControllerComponent implements BaseComponent {
     }
 
     const length = this.instance.length;
-    const perPage = this.options.perPage;
 
-    let index = page * perPage;
-    index = index - (this.pageLength * perPage - length) * Math.floor(index / length);
+    let index = page;
+    index = index - (this.pageLength - length) * Math.floor(index / length);
 
     // Adjustment for the last page.
-    if (length - perPage <= index && index < length) {
-      index = length - perPage;
+    if (length - 1 <= index && index < length) {
+      index = length - 1;
     }
 
     return index;
@@ -116,14 +115,12 @@ export default class ControllerComponent implements BaseComponent {
     }
 
     const length = this.instance.length;
-    const perPage = this.options.perPage;
 
-    // Make the last "perPage" number of slides belong to the last page.
-    if (length - perPage <= index && index < length) {
-      return Math.floor((length - 1) / perPage);
+    if (length - 1 <= index && index < length) {
+      return length - 1;
     }
 
-    return Math.floor(index / perPage);
+    return index;
   }
 
   /**
@@ -187,7 +184,7 @@ export default class ControllerComponent implements BaseComponent {
    */
   get pageLength(): number {
     const length = this.instance.length;
-    return this.hasFocus() ? length : Math.ceil(length / this.options.perPage);
+    return this.hasFocus() ? length : Math.ceil(length);
   }
 
   /**
@@ -206,7 +203,7 @@ export default class ControllerComponent implements BaseComponent {
       return length - 1;
     }
 
-    return length - this.options.perPage;
+    return length - 1;
   }
 
   /**

src/components/layout/directions/horizontal-layout.ts

@@ -2,11 +2,6 @@ import { BaseLayout } from './../index';
 import { toPixel, unit } from '../../../utils/utils';
 import { applyStyle } from '../../../utils/dom';
 
-/**
- * Max width of a slide.
- */
-const SLIDE_MAX_WIDTH = 5000;
-
 export class HorizontalLayout extends BaseLayout {
   private padding: { left: number; right: number };
   private _gap: number;
@@ -56,7 +51,7 @@ export class HorizontalLayout extends BaseLayout {
   get listWidth() {
     const total = this.virtual.total;
 
-    return this.options.autoWidth ? total * SLIDE_MAX_WIDTH : this.totalWidth(total);
+    return this.totalWidth(total);
   }
 
   get listHeight(): number {
@@ -82,13 +77,7 @@ export class HorizontalLayout extends BaseLayout {
    * @return The slide width.
    */
   slideWidth(index?: number): number {
-    if (this.options.autoWidth) {
-      const slide = this.virtual.getSlide(index);
-
-      return slide ? slide.slide.offsetWidth : 0;
-    }
-
-    const width: string | number = this.options.fixedWidth || (this.width + this.gap) / this.options.perPage - this.gap;
+    const width: string | number = this.width + this.gap - this.gap;
 
     return toPixel(this.instance.root, width);
   }

src/components/layout/index.ts

@@ -80,7 +80,7 @@ export abstract class BaseLayout implements BaseComponent {
       applyStyle(slide.container, { height: slideHeight });
 
       applyStyle(slide.slide, {
-        width: this.options.autoWidth ? null : unit(this.slideWidth(slide.index)),
+        width: unit(this.slideWidth(slide.index)),
         height: slide.container ? null : slideHeight,
       });
     });
@@ -101,7 +101,7 @@ export abstract class BaseLayout implements BaseComponent {
     const slideHeight = unit(this.slideHeight);
 
     applyStyle(slide.slide, {
-      width: this.options.autoWidth ? null : unit(this.slideWidth(slide.index)),
+      width: unit(this.slideWidth(slide.index)),
       height: slide.container ? null : slideHeight,
     });
   }

src/components/virtual/virtual.component.ts

@@ -222,7 +222,7 @@ export default class VirtualComponent implements BaseComponent {
     const offset = this.layout.slideWidth() * this.previousFrom;
 
     const styles = {};
-    styles[offsetProp] = this.options.autoWidth ? null : unit(offset);
+    styles[offsetProp] = unit(offset);
 
     this.each(slide => {
       applyStyle(slide.slide, styles);

src/constants/defaults.ts

@@ -6,7 +6,7 @@ export const DEFAULTS = {
    * Determine a slider type.
    * - 'slide': Regular slider.
    * - 'loop' : Carousel slider.
-   * - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
+   * - 'fade' : Change slides with fade transition. Drag options are ignored.
    */
   type: 'slide',
 
@@ -36,12 +36,6 @@ export const DEFAULTS = {
    */
   height: 0,
 
-  /**
-   * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
-   * perPage number will be ignored when this option is falsy.
-   */
-  fixedWidth: 0,
-
   /**
    * Fix height of slides. CSS format is allowed such as 10em, 80vh but % unit is not accepted.
    * heightRatio option will be ignored when this option is falsy.
@@ -54,18 +48,6 @@ export const DEFAULTS = {
    */
   heightRatio: 0,
 
-  /**
-   * If true, slide width will be determined by the element width itself.
-   * - perPage/perMove should be 1.
-   * - lazyLoad should be false.
-   */
-  autoWidth: false,
-
-  /**
-   * Determine how many slides should be displayed per page.
-   */
-  perPage: 1,
-
   /**
    * Determine how many slides should be moved when a slider goes to next or perv.
    */
@@ -240,11 +222,9 @@ export const DEFAULTS = {
    * @example
    * {
    *   '1000': {
-   *     perPage: 3,
    *     gap: 20
    *   },
    *   '600': {
-   *     perPage: 1,
    *     gap: 5,
    *   }
    * }

src/virchual.ts

@@ -22,17 +22,13 @@ export type VirchualOptions = {
   speed?: number;
   rewind?: boolean;
   focus?: boolean | string | number;
-  perPage?: number;
   isNavigation?: boolean;
-  drag?: boolean;
   easing?: string;
   gap?: number | string;
   padding?: { left: number | string; right: number | string };
-  autoWidth?: boolean;
   width?: number | string;
   trimSpace?: boolean | string;
   direction?: string;
-  fixedWidth?: number | string;
   height?: number;
   fixedHeight?: number | string;
   heightRatio?: number;
@@ -69,16 +65,12 @@ export default class Virchual {
       speed: 400,
       rewind: false,
       focus: false,
-      perPage: 1,
-      drag: true,
       isNavigation: false,
       trimSpace: false,
-      autoWidth: false,
       padding: undefined,
       width: 0,
       gap: 0,
       direction: 'ltr',
-      fixedWidth: 0,
       height: 0,
       fixedHeight: 0,
       heightRatio: 0,

stats.html

@@ -2600,7 +2600,7 @@
 
     </script>
     <script>
-      const data = {"version":1,"tree":{"name":"index.bundle.js","children":[{"name":"utils","children":[{"name":"object.ts","uid":"d50b-0"},{"name":"utils.ts","uid":"d50b-1"},{"name":"dom.ts","uid":"d50b-2"},{"name":"throttle.ts","uid":"d50b-7"},{"name":"error.ts","uid":"d50b-16"}]},{"name":"constants","children":[{"name":"types.ts","uid":"d50b-3"},{"name":"classes.ts","uid":"d50b-10"},{"name":"directions.ts","uid":"d50b-14"}]},{"name":"components","children":[{"name":"clone","children":[{"name":"clone.component.ts","uid":"d50b-4"}]},{"name":"controller","children":[{"name":"controller.component.ts","uid":"d50b-5"}]},{"name":"drag","children":[{"name":"drag.component.ts","uid":"d50b-6"}]},{"name":"layout","children":[{"name":"index.ts","uid":"d50b-8"},{"name":"directions","children":[{"name":"horizontal-layout.ts","uid":"d50b-9"}]}]},{"name":"pagination","children":[{"name":"pagination.component.ts","uid":"d50b-11"}]},{"name":"track","children":[{"name":"directions","children":[{"name":"horizontal.ts","uid":"d50b-12"}]},{"name":"track.component.ts","uid":"d50b-13"}]},{"name":"virtual","children":[{"name":"slide.component.ts","uid":"d50b-15"},{"name":"virtual.component.ts","uid":"d50b-17"}]}]},{"name":"core","children":[{"name":"event.ts","uid":"d50b-18"}]},{"name":"transitions","children":[{"name":"slide","children":[{"name":"index.ts","uid":"d50b-19"}]}]},{"name":"virchual.ts","uid":"d50b-20"}],"renderedLength":19829,"isRoot":true},"nodes":{"d50b-0":{"renderedLength":648,"id":"utils/object.ts"},"d50b-1":{"renderedLength":1929,"id":"utils/utils.ts"},"d50b-2":{"renderedLength":3097,"id":"utils/dom.ts"},"d50b-3":{"renderedLength":115,"id":"constants/types.ts"},"d50b-4":{"renderedLength":3570,"id":"components/clone/clone.component.ts"},"d50b-5":{"renderedLength":6535,"id":"components/controller/controller.component.ts"},"d50b-6":{"renderedLength":4785,"id":"components/drag/drag.component.ts"},"d50b-7":{"renderedLength":584,"id":"utils/throttle.ts"},"d50b-8":{"renderedLength":2328,"id":"components/layout/index.ts"},"d50b-9":{"renderedLength":2518,"id":"components/layout/directions/horizontal-layout.ts"},"d50b-10":{"renderedLength":1054,"id":"constants/classes.ts"},"d50b-11":{"renderedLength":5887,"id":"components/pagination/pagination.component.ts"},"d50b-12":{"renderedLength":2308,"id":"components/track/directions/horizontal.ts"},"d50b-13":{"renderedLength":4771,"id":"components/track/track.component.ts"},"d50b-14":{"renderedLength":110,"id":"constants/directions.ts"},"d50b-15":{"renderedLength":4018,"id":"components/virtual/slide.component.ts"},"d50b-16":{"renderedLength":567,"id":"utils/error.ts"},"d50b-17":{"renderedLength":5752,"id":"components/virtual/virtual.component.ts"},"d50b-18":{"renderedLength":2241,"id":"core/event.ts"},"d50b-19":{"renderedLength":1325,"id":"transitions/slide/index.ts"},"d50b-20":{"renderedLength":4502,"isEntry":true,"id":"virchual.ts"},"d50b-21":{"renderedLength":0,"id":"css/styles.css"},"d50b-22":{"renderedLength":0,"id":"\u0000tslib.js"}},"links":[{"source":"d50b-20","target":"d50b-4"},{"source":"d50b-20","target":"d50b-5"},{"source":"d50b-20","target":"d50b-6"},{"source":"d50b-20","target":"d50b-9"},{"source":"d50b-20","target":"d50b-11"},{"source":"d50b-20","target":"d50b-13"},{"source":"d50b-20","target":"d50b-17"},{"source":"d50b-20","target":"d50b-10"},{"source":"d50b-20","target":"d50b-18"},{"source":"d50b-20","target":"d50b-21"},{"source":"d50b-20","target":"d50b-19"},{"source":"d50b-20","target":"d50b-2"},{"source":"d50b-20","target":"d50b-16"},{"source":"d50b-20","target":"d50b-0"},{"source":"d50b-4","target":"d50b-2"},{"source":"d50b-4","target":"d50b-3"},{"source":"d50b-5","target":"d50b-1"},{"source":"d50b-9","target":"d50b-8"},{"source":"d50b-9","target":"d50b-1"},{"source":"d50b-9","target":"d50b-2"},{"source":"d50b-11","target":"d50b-10"},{"source":"d50b-11","target":"d50b-2"},{"source":"d50b-11","target":"d50b-1"},{"source":"d50b-13","target":"d50b-2"},{"source":"d50b-13","target":"d50b-12"},{"source":"d50b-17","target":"d50b-15"},{"source":"d50b-17","target":"d50b-2"},{"source":"d50b-17","target":"d50b-1"},{"source":"d50b-17","target":"d50b-16"},{"source":"d50b-17","target":"d50b-0"},{"source":"d50b-19","target":"d50b-2"},{"source":"d50b-2","target":"d50b-0"},{"source":"d50b-2","target":"d50b-1"},{"source":"d50b-0","target":"d50b-22"},{"source":"d50b-1","target":"d50b-2"},{"source":"d50b-8","target":"d50b-2"},{"source":"d50b-8","target":"d50b-7"},{"source":"d50b-8","target":"d50b-1"},{"source":"d50b-12","target":"d50b-1"},{"source":"d50b-15","target":"d50b-2"},{"source":"d50b-15","target":"d50b-0"},{"source":"d50b-15","target":"d50b-1"},{"source":"d50b-15","target":"d50b-10"},{"source":"d50b-15","target":"d50b-14"}],"env":{"rollup":"2.26.0","rollup-plugin-visualizer":"4.1.0"},"options":{"gzip":false,"brotli":false}};
+      const data = {"version":1,"tree":{"name":"index.bundle.js","children":[{"name":"utils","children":[{"name":"object.ts","uid":"25a2-0"},{"name":"utils.ts","uid":"25a2-1"},{"name":"dom.ts","uid":"25a2-2"},{"name":"throttle.ts","uid":"25a2-7"},{"name":"error.ts","uid":"25a2-16"}]},{"name":"constants","children":[{"name":"types.ts","uid":"25a2-3"},{"name":"classes.ts","uid":"25a2-10"},{"name":"directions.ts","uid":"25a2-14"}]},{"name":"components","children":[{"name":"clone","children":[{"name":"clone.component.ts","uid":"25a2-4"}]},{"name":"controller","children":[{"name":"controller.component.ts","uid":"25a2-5"}]},{"name":"drag","children":[{"name":"drag.component.ts","uid":"25a2-6"}]},{"name":"layout","children":[{"name":"index.ts","uid":"25a2-8"},{"name":"directions","children":[{"name":"horizontal-layout.ts","uid":"25a2-9"}]}]},{"name":"pagination","children":[{"name":"pagination.component.ts","uid":"25a2-11"}]},{"name":"track","children":[{"name":"directions","children":[{"name":"horizontal.ts","uid":"25a2-12"}]},{"name":"track.component.ts","uid":"25a2-13"}]},{"name":"virtual","children":[{"name":"slide.component.ts","uid":"25a2-15"},{"name":"virtual.component.ts","uid":"25a2-17"}]}]},{"name":"core","children":[{"name":"event.ts","uid":"25a2-18"}]},{"name":"transitions","children":[{"name":"slide","children":[{"name":"index.ts","uid":"25a2-19"}]}]},{"name":"virchual.ts","uid":"25a2-20"}],"renderedLength":19411,"isRoot":true},"nodes":{"25a2-0":{"renderedLength":648,"id":"utils/object.ts"},"25a2-1":{"renderedLength":1929,"id":"utils/utils.ts"},"25a2-2":{"renderedLength":3097,"id":"utils/dom.ts"},"25a2-3":{"renderedLength":115,"id":"constants/types.ts"},"25a2-4":{"renderedLength":3570,"id":"components/clone/clone.component.ts"},"25a2-5":{"renderedLength":6237,"id":"components/controller/controller.component.ts"},"25a2-6":{"renderedLength":4785,"id":"components/drag/drag.component.ts"},"25a2-7":{"renderedLength":584,"id":"utils/throttle.ts"},"25a2-8":{"renderedLength":2264,"id":"components/layout/index.ts"},"25a2-9":{"renderedLength":2184,"id":"components/layout/directions/horizontal-layout.ts"},"25a2-10":{"renderedLength":1054,"id":"constants/classes.ts"},"25a2-11":{"renderedLength":5887,"id":"components/pagination/pagination.component.ts"},"25a2-12":{"renderedLength":2308,"id":"components/track/directions/horizontal.ts"},"25a2-13":{"renderedLength":4771,"id":"components/track/track.component.ts"},"25a2-14":{"renderedLength":110,"id":"constants/directions.ts"},"25a2-15":{"renderedLength":4018,"id":"components/virtual/slide.component.ts"},"25a2-16":{"renderedLength":567,"id":"utils/error.ts"},"25a2-17":{"renderedLength":5720,"id":"components/virtual/virtual.component.ts"},"25a2-18":{"renderedLength":2241,"id":"core/event.ts"},"25a2-19":{"renderedLength":1325,"id":"transitions/slide/index.ts"},"25a2-20":{"renderedLength":4445,"isEntry":true,"id":"virchual.ts"},"25a2-21":{"renderedLength":0,"id":"css/styles.css"},"25a2-22":{"renderedLength":0,"id":"\u0000tslib.js"}},"links":[{"source":"25a2-20","target":"25a2-4"},{"source":"25a2-20","target":"25a2-5"},{"source":"25a2-20","target":"25a2-6"},{"source":"25a2-20","target":"25a2-9"},{"source":"25a2-20","target":"25a2-11"},{"source":"25a2-20","target":"25a2-13"},{"source":"25a2-20","target":"25a2-17"},{"source":"25a2-20","target":"25a2-10"},{"source":"25a2-20","target":"25a2-18"},{"source":"25a2-20","target":"25a2-21"},{"source":"25a2-20","target":"25a2-19"},{"source":"25a2-20","target":"25a2-2"},{"source":"25a2-20","target":"25a2-16"},{"source":"25a2-20","target":"25a2-0"},{"source":"25a2-4","target":"25a2-2"},{"source":"25a2-4","target":"25a2-3"},{"source":"25a2-5","target":"25a2-1"},{"source":"25a2-9","target":"25a2-8"},{"source":"25a2-9","target":"25a2-1"},{"source":"25a2-9","target":"25a2-2"},{"source":"25a2-11","target":"25a2-10"},{"source":"25a2-11","target":"25a2-2"},{"source":"25a2-11","target":"25a2-1"},{"source":"25a2-13","target":"25a2-2"},{"source":"25a2-13","target":"25a2-12"},{"source":"25a2-17","target":"25a2-15"},{"source":"25a2-17","target":"25a2-2"},{"source":"25a2-17","target":"25a2-1"},{"source":"25a2-17","target":"25a2-16"},{"source":"25a2-17","target":"25a2-0"},{"source":"25a2-19","target":"25a2-2"},{"source":"25a2-2","target":"25a2-0"},{"source":"25a2-2","target":"25a2-1"},{"source":"25a2-0","target":"25a2-22"},{"source":"25a2-1","target":"25a2-2"},{"source":"25a2-8","target":"25a2-2"},{"source":"25a2-8","target":"25a2-7"},{"source":"25a2-8","target":"25a2-1"},{"source":"25a2-12","target":"25a2-1"},{"source":"25a2-15","target":"25a2-2"},{"source":"25a2-15","target":"25a2-0"},{"source":"25a2-15","target":"25a2-1"},{"source":"25a2-15","target":"25a2-10"},{"source":"25a2-15","target":"25a2-14"}],"env":{"rollup":"2.26.0","rollup-plugin-visualizer":"4.1.0"},"options":{"gzip":false,"brotli":false}};
 
       document.addEventListener('DOMContentLoaded', () => {
         const width = window.innerWidth;