Improve the documentation

Author: nir9

README.md

@@ -36,8 +36,6 @@ For this example CSS, we assume the carousel is contained within an element that
     padding: 0;
     list-style-type: none;
     position: absolute;
-    -webkit-transform-style: preserve;
-    -ms-transform-style: preserve;
     transform-style: preserve;
 }
 
@@ -65,65 +63,53 @@ window.addEventListener("load", () => {
 
 ### Options
 
-duration - duration of slide animation {default: 350ms}
+Options are passed as key-values into the object that the ```Itemslide``` constructor gets into the second parameter, for example:
 
-swipe_sensitivity - swiping sensitivity {default: 150}
-
-disable_slide - disable swiping and panning {default: false}
-
-disable_clicktoslide - disable click to slide {default: false}
-
-disable_autowidth - disable the automatic calculation of width (so that you could do it manually) {default: false}
-
-disable_scroll - disable the sliding triggered by mousewheel scrolling {default: false}
-
-start - index of slide that appears when initializing {default: 0}
-
-pan_threshold - can be also considered as panning sensitivity {default: 0.3}(precentage of slide width)
-
-one_item - set this to true if the navigation is full screen or one slide every time. {default: false}
+```js
+new Itemslide(element, { duration: 100 });
+```
 
-parent_width - set this to true if you want the width of the slides to be the width of the parent of ul. {default: false}
+Will initialize Itemslide with a custom duration of 100ms.
 
-swipe_out - set this to true to enable the swipe out feature. {default: false} (
+Here are the available options:
 
-left_sided - left sided carousel (instead of default force-centered) {default: false}
+- ```duration``` - duration of slide animation {default: 350ms}
+- ```swipe_sensitivity``` - swiping sensitivity {default: 150}
+- ```disable_slide``` - disable swiping and panning {default: false}
+- ```disable_clicktoslide``` - disable click to slide {default: false}
+- ```disable_autowidth``` - disable the automatic calculation of width (so that you could do it manually) {default: false}
+- ```disable_scroll``` - disable the sliding triggered by mousewheel scrolling {default: false}
+- ```start``` - index of slide that appears when initializing {default: 0}
+- ```pan_threshold``` - can be also considered as panning sensitivity {default: 0.3}(precentage of slide width)
+- ```one_item``` - set this to true if the navigation is full screen or one slide every time. {default: false}
+- ```parent_width``` - set this to true if you want the width of the slides to be the width of the parent of ul. {default: false}
+- ```swipe_out``` - set this to true to enable the swipe out feature. {default: false} (
+- ```left_sided``` - left sided carousel (instead of default force-centered) {default: false}
 
 ### Methods
 
-getActiveIndex() - get current active slide index
-
-getCurrentPos() - get current position of carousel (pixels)
-
-nextSlide() - goes to next slide
+- ```getActiveIndex()``` - get current active slide index
+- ```getCurrentPos()``` - get current position of carousel (pixels)
+- ```nextSlide()``` - goes to next slide
+- ```previousSlide()``` - goes to previous slide
+- ```gotoSlide(i)``` - goes to a specific slide by index
+- ```reload()``` - recalculates width and center object (recommended to call when resize occures)
+- ```addSlide(data)``` - adds in the end of the carousel a new item.
+- ```removeSlide(index)``` - removes a specific slide by index.
 
-previousSlide() - goes to previous slide
-
-gotoSlide(i) - goes to a specific slide by index
-
-reload() - recalculates width and center object (recommended to call when resize occures)
-
-addSlide(data) - adds in the end of the carousel a new item.
-
-removeSlide(index) - removes a specific slide by index.
-
-NOTE: addSlide automatically adds li tags.
+> NOTE: addSlide automatically adds li tags.
 
 ### Events
 
-carouselChangePos - triggered when the position of the carousel is changed
-
-carouselPan - triggered when user pans
-
-carouselChangeActiveIndex - triggered when the current active item has changed
-
-carouselSwipeOut - triggered when user swipes out a slide (if swipe_out is enabled)
-
-> event.slideIndex - get index of swiped out slide
-
-carouselClickSlide - triggered when clicking/tapping a slide
+ItemSlide triggers the following events on the element it is initialized on:
 
-> event.slideIndex - get index of the clicked slide
+- ```carouselChangePos``` - triggered when the position of the carousel is changed
+- ```carouselPan``` - triggered when user pans
+- ```carouselChangeActiveIndex``` - triggered when the current active item has changed
+- ```carouselSwipeOut``` - triggered when user swipes out a slide (if swipe_out is enabled)
+  * ```event.slideIndex``` - get index of swiped out slide
+- ```carouselClickSlide``` - triggered when clicking/tapping a slide
+  * ```event.slideIndex``` - get index of the clicked slide
 
 ### Classes