scoochjs - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

package.json

 {
 	"name": "scoochjs",
-	"version": "0.1.3",
+	"version": "0.2.0",
 	"description": "A really lightweight, customisable vanilla Javascript carousel",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -34,2 +34,10 @@ # Scooch
 
+## Methods
+
+| Method             | Description                                                                   |
+| ------------------ | ----------------------------------------------------------------------------- |
+| `next()`           | Go to the next slide                                                          |
+| `previous()`       | Go to the previous slide                                                      |
+| `goToSlide(index)` | Go to specific slide. `index` should be the array index of the slide to goto. |
+
 ## Keyboard Controls
@@ -36,0 +44,0 @@

src/scooch.js

@@ -7,3 +7,3 @@ const Scooch = function (node, options = {}) {
         keyboardControls: true,
-        allowFullscreen: true,
+        allowFullscreen: true
     };
@@ -14,3 +14,3 @@
     this.node = node;
-    this.slides = this.node.querySelectorAll('.scooch-slide');
+    this.slides = Array.from(this.node.querySelectorAll('.scooch__slide'));
     this.firstSlide = this.slides[0];
@@ -22,7 +22,7 @@ this.lastSlide = this.slides[this.slides.length - 1];
 
-    /**
-     * Init
-     *
-     * Takes care of setting up the slider
-     */
+	/**
+	 * Init
+	 *
+	 * Takes care of setting up the slider
+	 */
     this.init = () => {
@@ -46,43 +46,28 @@ // Setup the first slide
     this.next = () => {
-        // Check we have a next slide
-        if (this.nextSlide === null) {
-            this.nextSlide = this.firstSlide;
-        }
-
-        // Hide the current slide
-        this.currentSlide.style.opacity = 0;
-
-        // Show the next slide
-        this.nextSlide.style.opacity = 1;
-
-        // Set this as previousSlide
-        this.previousSlide = this.currentSlide;
-
-        // Set the current slide
-        this.currentSlide = this.nextSlide;
-
-        // Get the next slide
-        this.nextSlide = this.nextSlide.nextElementSibling;
+        this.goToSlide(this.slides.indexOf(this.nextSlide));
     };
 
     this.previous = () => {
-        // Check we have a previous slide
-        if (this.previousSlide === null) {
-            this.previousSlide = this.lastSlide;
-        }
+        this.goToSlide(this.slides.indexOf(this.previousSlide));
+    };
 
-        // Hide the current slide
-        this.currentSlide.style.opacity = 0;
+    this.goToSlide = (index) => {
+        // Check the slide index exists
+        if (!this.slides[index]) return;
+        let slide = this.slides[index];
 
-        // Show the next slide
-        this.previousSlide.style.opacity = 1;
+        // Check if it matches lastSlide
+        this.previousSlide =
+            slide === this.firstSlide ? this.lastSlide : this.slides[index - 1];
 
-        // Set this as nextSlide
-        this.nextSlide = this.currentSlide;
+        // Check if it matches firstSlide
+        this.nextSlide =
+            slide === this.lastSlide ? this.firstSlide : this.slides[index + 1];
 
-        // Set the current slide
-        this.currentSlide = this.previousSlide;
+        // Hide the currentSlide
+        this.currentSlide.style.opacity = 0;
 
-        // Update previous slide
-        this.previousSlide = this.currentSlide.previousElementSibling;
+        // Set new slide
+        this.currentSlide = slide;
+        this.currentSlide.style.opacity = 1;
     };
@@ -106,3 +91,3 @@
         if (event.keyCode === 70 && this.options.allowFullscreen) {
-            this.node.requestFullscreen();
+            document.body.requestFullscreen();
         }
@@ -109,0 +94,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

9013

increased by2.21%

Number of lines in readme file

55

increased by17.02%

Worsened metrics

Lines of code

127

decreased by-7.3%

No dependency changes