a-simple-carousel - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

package.json

 {
   "name": "a-simple-carousel",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Simple, performant, vanilla JS carousel implementation",
@@ -5,0 +5,0 @@ "main": "src/js/index.js",

readme.md

@@ -22,2 +22,3 @@ # Simple Carousel
    - [Selector](#selector)
+   - [Movement Mode](#movement-mode)
    - [Movement Increment](#movement-increment)
@@ -170,2 +171,21 @@ - [Movement Unit](#movement-unit)
 
+### Movement Mode
+
+Required: No<br />
+Value: `String`<br />
+Default: `normal`<br />
+Key: `movementMode`
+
+Options: `(normal|child-increment)`
+
+Specifies the movement mode of the Carousel. These modes determine how the
+Carousel computes how much to move when the `next()` or `previous()` methods
+are called or it otherwise decides to move. See more information about the modes
+below.
+
+| Name | Key | Description |
+| --- | --- | --- |
+| Normal Mode | `normal` | This is the default mode. When active, causes the Carousel to move based on the set [Movement Increment](#movement-increment) and [Movement Unit](#movement-unit) options (or their defaults). |
+| Child Increment Mode | `child-increment` | When set, this mode causes the Carousel to ignore the [Movement Increment](#movement-increment) and [Movement Unit](#movement-unit) options, and instead move child-by-child. That is, that the Carousel will move based on each child's width. This is dynamically computed, so if children are different widths, or they change widths, that change will be accounted for. |
+
 ### Movement Increment
@@ -172,0 +192,0 @@

src/js/Carousel.js

@@ -9,2 +9,4 @@ export class Carousel {
         this.movementUnit = config.movementUnit || "%";
+        this.movementMode = config.movementMode || "normal";
+        this.currentChildIndex = 0; // used only for movementMode == 'child-increment'
         this.currentMovement = 0;
@@ -15,2 +17,6 @@ this.isAgainstLeftWall = false;
 
+        if(this.movementMode === 'child-increment') {
+            this.movementUnit = "px";
+        }
+
         this.upgrade();
@@ -42,2 +48,27 @@ }
 
+    computeAmountToMove(isGoingRight) {
+        switch(this.movementMode) {
+            // Mode in which the carousel moves child-by-child
+            case "child-increment":
+                // determine index of the child who's width will be used for the
+                // next movement value
+                const nextIndex = isGoingRight ? this.currentChildIndex
+                    : this.currentChildIndex - 1;
+
+                // if the nextIndex is out of bounds, don't do anything
+                if(nextIndex < 0 || nextIndex >= this.children.length) {
+                    return 0;
+                }
+
+                const child = this.children[nextIndex];
+                const childWidth = child.offsetWidth;
+
+                return this.currentMovement
+                    + ((isGoingRight ? 1 : -1) * childWidth);
+            default:
+                return this.currentMovement
+                    + ((isGoingRight ? 1 : -1) * this.movementIncrement);
+        }
+    }
+
     next() {
@@ -50,4 +81,8 @@ this.computeStatus();
 
-        var amountToMove = this.currentMovement + this.movementIncrement;
+        var amountToMove = this.computeAmountToMove(true);
 
+        if(this.movementMode === 'child-increment') {
+            this.currentChildIndex += 1;
+        }
+
         this.moveTo(amountToMove);
@@ -63,4 +98,8 @@ }
 
-        var amountToMove = this.currentMovement - this.movementIncrement;
+        var amountToMove = this.computeAmountToMove(false);
 
+        if(this.movementMode === 'child-increment') {
+            this.currentChildIndex -= 1;
+        }
+
         this.moveTo(amountToMove);
@@ -67,0 +106,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17635

increased by34.21%

Lines of code

157

increased by25.6%

Number of lines in readme file

224

increased by9.8%

No dependency changes