Add options to README

README.md

@@ -12,15 +12,15 @@ yarn add embla-carousel
 
 ```javascript
 import EmblaCarousel from 'embla-carousel'
-const embla = EmblaCarousel(document.querySelector('.embla'))
+const embla = EmblaCarousel(document.getElementById('embla'))
 ```
 
 ...or inject the minified script [here](https://raw.githubusercontent.com/davidcetinkaya/embla-carousel/master/sandbox/index.js) into your website.
 
 ```html
 <script src="embla.min.js"></script>
 <script>
-  const embla = EmblaCarousel(document.querySelector('.embla'))
+  const embla = EmblaCarousel(document.getElementById('embla'))
 </script>
 ```
 
@@ -29,7 +29,7 @@ const embla = EmblaCarousel(document.querySelector('.embla'))
 Setup your HTML markup...
 
 ```html
-<div class="embla">
+<div class="embla" id="embla">
   <div class="embla__container">
     <div class="embla__slide">
       ...
@@ -44,7 +44,7 @@ Setup your HTML markup...
 </div>
 ```
 
-...Add some CSS...
+...add some CSS...
 
 ```css
 .embla {
@@ -61,11 +61,59 @@ Setup your HTML markup...
 }
 ```
 
-...Initialize the script and pass the element node...
+...initialize the script and pass the element node...
 
 ```javascript
 import EmblaCarousel from 'embla-carousel'
 const embla = EmblaCarousel(document.querySelector('.embla'))
 ```
 
-...And you're good to go!
+...and you're good to go!
+
+## Options
+
+Embla comes with a few optional settings that you can change by passing an object as the second argument. **`Default`** values are:
+
+```javascript
+const node = document.getElementById('embla')
+const embla = EmblaCarousel(node, {
+  align: 'center',
+  container: '*',
+  draggable: true,
+  loop: false,
+  mass: 1.5,
+  speed: 10,
+  startIndex: 0,
+  onInit: () => false,
+  onSelect: () => false,
+})
+```
+
+**`align`** (string: 'start' | 'center' | 'end')
+Align the slides relative to the carousel viewport.
+
+**`container`** (string: querySelectorString)
+The selector to use for the container that holds the slides. Embla will use all immediate children of this node as slides.
+
+**`draggable`** (boolean)  
+Allow mouse and touch interactions to move the carousel.
+
+**`loop`** (boolean)  
+Determines if the carousel should loop when start or end is reached.
+
+**`mass`** (number)  
+Simulates how heavy the carousel is. A higher number will add more wiggle effect.
+
+**`speed`** (number)  
+Carousel speed when using buttons to navigate. A higher number will make transitions faster. Pointer events are not affected by this.
+
+**`startIndex`** (number)
+Zero based index of the starting slide when carousel mounts.
+
+**`onInit`** (function)
+Callback that runs when the carousel has mounted.
+
+**`onSelect`** (function)
+Callback that runs when a new slide target has been selected.
+
+## API