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

index.html

@@ -34,7 +34,7 @@
         /* Colors from Open color (https://yeun.github.io/open-color) */
         .snappy-carousel {
             .scroll-container {
-                max-height: 300px;
+                max-height: 400px;
                 gap: 0.5rem;
             }
 
@@ -140,8 +140,8 @@
 
         See https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
 
-        data-direction="x" 
+        data-scroll-direction="x" 
-        data-direction="y" 
+        data-scroll-direction="y" 
         
         data-snap-stop="always"
         data-snap-stop="normal"
@@ -167,6 +167,23 @@
         <div class="pagination"></div>
     </div>
 
+    <div class="snappy-carousel" data-scroll-direction="y">
+        <div class="scroll-container">
+            <div class="slide">1</div>
+            <div class="slide">2</div>
+            <div class="slide">3</div>
+            <div class="slide">4</div>
+            <div class="slide">5</div>
+            <div class="slide">6</div>
+            <div class="slide">7</div>
+            <div class="slide">8</div>
+        </div>
+
+        <button class="prev">❮</button>
+        <button class="next">❯</button>
+        <div class="pagination"></div>
+    </div>
+
     <!-- Javascript is only needed for pagination and buttons -->
     <script src="dist/snappy.js" defer></script>
 </body>

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.prevButton = element.querySelector(`.prev`);
-        this.nextButton = document.querySelector(`.next`);
+        this.nextButton = element.querySelector(`.next`);
-        this.pagination = document.querySelector(`.pagination`);
+        this.pagination = element.querySelector(`.pagination`);
 
         this.scrollContainer.addEventListener('mousedown', this.startDrag.bind(this));
         this.scrollContainer.addEventListener('mousemove', this.drag.bind(this));