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-direction="y" 
+        data-scroll-direction="x" 
+        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>