Change naming for scroll-direction and fixed a bug where all control would reference the first carousel on the page.

src/snappy.css

@@ -32,7 +32,7 @@
 
     /* Options */
 
-    &[data-direction="y"] .scroll-container {
+    &[data-scroll-direction="y"] .scroll-container {
         flex-direction: column;
         overflow-x: hidden;
         overflow-y: auto;

src/snappy.js

@@ -28,7 +28,7 @@ class Carousel {
     paginationDots = [];
 
     // Behavioral constants
-    inertia = 0.90; // Decay rate (0.9 = slower stop, 0.99 = longer slide)
+    inertia = 0.92; // Decay rate (0.9 = slower stop, 0.99 = longer slide)
     velocityFrameCount = 5;
 
     // State variables
@@ -54,12 +54,12 @@ class Carousel {
      */
     constructor(element) {
         this.scrollContainer = element.querySelector('.scroll-container');
-        this.direction = element.dataset.direction === 'y' ? 'y' : 'x';
+        this.direction = element.dataset.scrollDirection === 'y' ? 'y' : 'x';
         this.slides = this.scrollContainer.querySelectorAll('.slide');
 
-        this.prevButton = document.querySelector(`.prev`);
-        this.nextButton = document.querySelector(`.next`);
-        this.pagination = document.querySelector(`.pagination`);
+        this.prevButton = element.querySelector(`.prev`);
+        this.nextButton = element.querySelector(`.next`);
+        this.pagination = element.querySelector(`.pagination`);
 
         this.scrollContainer.addEventListener('mousedown', this.startDrag.bind(this));
         this.scrollContainer.addEventListener('mousemove', this.drag.bind(this));