Change html structure to get get rid of id's

README.md

@@ -2,9 +2,11 @@
 
 Snappy is yet another carousel library.
 Its goal is to be as lightweight and performant as possible.
+
 It does not implement every feature found in other carousel libraries. Instead, it relies on native CSS scroll snapping and adds as little on top as possible.
 
-Mouse-drag behavior closely follows native touch scrolling in the browser, including inertia and snapping to a slide.
+Mouse-drag behavior closely follows native touch scrolling in the browser, including inertia and snapping to a slide. Thus dragging with the mouse feels pretty identical to native scrolling on a touch device or using a trackpad.
+
 
 | File       |    Size |
 | ---------- | ------: |
@@ -14,7 +16,8 @@ Mouse-drag behavior closely follows native touch scrolling in the browser, inclu
 
 ## Usage
 
-### CSS only
+
+### CSS only for a basic scroll container
 
 You can use Snappy without JavaScript. This gives you a simple CSS-only scroll container with snapping slides.
 
@@ -23,17 +26,55 @@ You can use Snappy without JavaScript. This gives you a simple CSS-only scroll c
 <link rel="stylesheet" href="dist/snappy.css">
 
 <!-- add this structure -->
-<div id="demo-carousel" class="snappy-carousel">
-    <div class="snappy-slide"></div>
-    <div class="snappy-slide"></div>
-    <div class="snappy-slide"></div>
-    ...
+<div class="snappy-carousel">
+    <div class="scroll-container">
+        <div class="slide">1</div>
+        <div class="slide">2</div>
+        ...
+    </div>
 </div>
 ```
 
-Snappy is mostly unstyled, leaving the appearance up to you. For inspiration, see the [example](index.html).
+Snappy is mostly unstyled, leaving the appearance up to you.   
+For inspiration, see the [complete example](index.html).
 
-### Add JavaScript
+
+### Options
+https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
+add data attribites to the carousel container to change the default behavior:
+
+```html
+<!--
+Options
+-------
+
+data-direction="x" (default)
+data-direction="y" 
+
+data-gap="var(--size-1)"
+data-gap="10px"
+data-gap="1rem"
+
+data-snap-stop="always"
+data-snap-stop="normal" (default)
+
+data-snap-align="center" (default)
+data-snap-align="start"
+data-snap-align="end"
+-->
+<div class="snappy-carousel"  
+    data-gap="1rem"
+    data-snap-align="start">
+
+    <div class="scroll-container">
+        <div class="slide">1</div>
+        <div class="slide">2</div>
+        ...
+    </div>
+</div>
+
+
+### Add JavaScript for a carousel
 
 Including the JavaScript adds the following features:
 
@@ -42,6 +83,18 @@ Including the JavaScript adds the following features:
 - Mouse dragging
 
 ```html
+    <div class="snappy-carousel" data-gap="1rem" data-snap-align="start">
+        <div class="scroll-container">
+            <div class="slide">1</div>
+            <div class="slide">2</div>
+            ...
+        </div>
+
+        <button class="prev">❮</button>
+        <button class="next">❯</button>
+        <div class="pagination"></div>
+    </div>
+
 <script src="dist/snappy.js" defer></script>
 ```