diff --git a/.docz/app/db.json b/.docz/app/db.json
index 65f5b2f..21be416 100644
--- a/.docz/app/db.json
+++ b/.docz/app/db.json
@@ -21,7 +21,7 @@
       }
     },
     "ordering": "ascending",
-    "version": "0.1.17",
+    "version": "0.1.18",
     "repository": "https://github.com/sag1v/react-elastic-carousel",
     "native": false,
     "src": "./src/docs",
@@ -31,6 +31,13 @@
     "base": "/react-elastic-carousel/",
     "htmlContext": {
       "head": {
+        "scripts": [
+          {
+            "async": "async",
+            "src": "https://www.googletagmanager.com/gtag/js?id=UA-127217040-1"
+          }
+        ],
+        "raw": "<script>\n              window.dataLayer = window.dataLayer || [];\n              function gtag(){dataLayer.push(arguments);}\n              gtag('js', new Date());\n              gtag('config', 'UA-127217040-1');\n            </script>",
         "links": [
           {
             "rel": "stylesheet",
@@ -112,28 +119,6 @@
         }
       ]
     },
-    "mdx/goTo.mdx": {
-      "name": "goTo",
-      "order": 989,
-      "route": "/goTo",
-      "menu": "Examples",
-      "id": "0d9b9869868b7d346d28d47233378890",
-      "filepath": "mdx/goTo.mdx",
-      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/goTo.mdx",
-      "slug": "mdx-go-to",
-      "headings": [
-        {
-          "depth": 1,
-          "slug": "goto",
-          "value": "goTo"
-        },
-        {
-          "depth": 4,
-          "slug": "you-can-trigger-the-goto-method-via-a-ref-to-the-carousel",
-          "value": "You can trigger the  goTo  method via a  ref  to the  Carousel :"
-        }
-      ]
-    },
     "mdx/focusOnSelect.mdx": {
       "name": "focusOnSelect",
       "order": 5,
@@ -156,6 +141,28 @@
         }
       ]
     },
+    "mdx/goTo.mdx": {
+      "name": "goTo",
+      "order": 989,
+      "route": "/goTo",
+      "menu": "Examples",
+      "id": "0d9b9869868b7d346d28d47233378890",
+      "filepath": "mdx/goTo.mdx",
+      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/goTo.mdx",
+      "slug": "mdx-go-to",
+      "headings": [
+        {
+          "depth": 1,
+          "slug": "goto",
+          "value": "goTo"
+        },
+        {
+          "depth": 4,
+          "slug": "you-can-trigger-the-goto-method-via-a-ref-to-the-carousel",
+          "value": "You can trigger the  goTo  method via a  ref  to the  Carousel :"
+        }
+      ]
+    },
     "mdx/index.mdx": {
       "name": "Getting started",
       "route": "/",
@@ -215,6 +222,28 @@
         }
       ]
     },
+    "mdx/itemPosition.mdx": {
+      "name": "itemPosition",
+      "order": 9,
+      "route": "/itemPosition",
+      "menu": "Examples",
+      "id": "76a6425c8af9dc748f704aee745e416e",
+      "filepath": "mdx/itemPosition.mdx",
+      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemPosition.mdx",
+      "slug": "mdx-item-position",
+      "headings": [
+        {
+          "depth": 1,
+          "slug": "itemposition",
+          "value": "itemPosition"
+        },
+        {
+          "depth": 4,
+          "slug": "sets-the-position-of-the-item-within-the-items-wrapper",
+          "value": "Sets the position of the item within the item's wrapper."
+        }
+      ]
+    },
     "mdx/isRTL.mdx": {
       "name": "isRTL",
       "order": 6,
@@ -259,28 +288,6 @@
         }
       ]
     },
-    "mdx/itemPosition.mdx": {
-      "name": "itemPosition",
-      "order": 9,
-      "route": "/itemPosition",
-      "menu": "Examples",
-      "id": "76a6425c8af9dc748f704aee745e416e",
-      "filepath": "mdx/itemPosition.mdx",
-      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemPosition.mdx",
-      "slug": "mdx-item-position",
-      "headings": [
-        {
-          "depth": 1,
-          "slug": "itemposition",
-          "value": "itemPosition"
-        },
-        {
-          "depth": 4,
-          "slug": "sets-the-position-of-the-item-within-the-items-wrapper",
-          "value": "Sets the position of the item within the item's wrapper."
-        }
-      ]
-    },
     "mdx/itemsToScroll.mdx": {
       "name": "itemsToScroll",
       "order": 2,
@@ -325,28 +332,6 @@
         }
       ]
     },
-    "mdx/onNextEnd.mdx": {
-      "name": "onNextEnd",
-      "order": 991,
-      "route": "/onNextEnd",
-      "menu": "Examples",
-      "id": "252226ec0e74a4c6191f7c27e27ab109",
-      "filepath": "mdx/onNextEnd.mdx",
-      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onNextEnd.mdx",
-      "slug": "mdx-on-next-end",
-      "headings": [
-        {
-          "depth": 1,
-          "slug": "onnextend",
-          "value": "onNextEnd"
-        },
-        {
-          "depth": 4,
-          "slug": "onnextend-will-pass-the-new-current-item-object",
-          "value": "onNextEnd  will pass the new    item-object :"
-        }
-      ]
-    },
     "mdx/onNextStart.mdx": {
       "name": "onNextStart",
       "order": 990,
@@ -369,28 +354,6 @@
         }
       ]
     },
-    "mdx/onPrevStart.mdx": {
-      "name": "onPrevStart",
-      "order": 992,
-      "route": "/onPrevStart",
-      "menu": "Examples",
-      "id": "7dc068d4b5d88e53563c61b61cbd99a4",
-      "filepath": "mdx/onPrevStart.mdx",
-      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onPrevStart.mdx",
-      "slug": "mdx-on-prev-start",
-      "headings": [
-        {
-          "depth": 1,
-          "slug": "onprevstart",
-          "value": "onPrevStart"
-        },
-        {
-          "depth": 4,
-          "slug": "onprevstart-will-pass-both-the-current-and-next-item-object",
-          "value": "onPrevStart  will pass both the   and    item-object :"
-        }
-      ]
-    },
     "mdx/onPrevEnd.mdx": {
       "name": "onPrevEnd",
       "order": 993,
@@ -413,6 +376,50 @@
         }
       ]
     },
+    "mdx/onNextEnd.mdx": {
+      "name": "onNextEnd",
+      "order": 991,
+      "route": "/onNextEnd",
+      "menu": "Examples",
+      "id": "252226ec0e74a4c6191f7c27e27ab109",
+      "filepath": "mdx/onNextEnd.mdx",
+      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onNextEnd.mdx",
+      "slug": "mdx-on-next-end",
+      "headings": [
+        {
+          "depth": 1,
+          "slug": "onnextend",
+          "value": "onNextEnd"
+        },
+        {
+          "depth": 4,
+          "slug": "onnextend-will-pass-the-new-current-item-object",
+          "value": "onNextEnd  will pass the new    item-object :"
+        }
+      ]
+    },
+    "mdx/onPrevStart.mdx": {
+      "name": "onPrevStart",
+      "order": 992,
+      "route": "/onPrevStart",
+      "menu": "Examples",
+      "id": "7dc068d4b5d88e53563c61b61cbd99a4",
+      "filepath": "mdx/onPrevStart.mdx",
+      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onPrevStart.mdx",
+      "slug": "mdx-on-prev-start",
+      "headings": [
+        {
+          "depth": 1,
+          "slug": "onprevstart",
+          "value": "onPrevStart"
+        },
+        {
+          "depth": 4,
+          "slug": "onprevstart-will-pass-both-the-current-and-next-item-object",
+          "value": "onPrevStart  will pass both the   and    item-object :"
+        }
+      ]
+    },
     "mdx/onResize.mdx": {
       "name": "onResize",
       "order": 995,
@@ -435,6 +442,28 @@
         }
       ]
     },
+    "mdx/slideNext.mdx": {
+      "name": "slideNext / slidePrev",
+      "order": 994,
+      "route": "/slideNext",
+      "menu": "Examples",
+      "id": "70cfc8eaa9911ab18a7ac7bc763b34ce",
+      "filepath": "mdx/slideNext.mdx",
+      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/slideNext.mdx",
+      "slug": "mdx-slide-next",
+      "headings": [
+        {
+          "depth": 1,
+          "slug": "slidenext--slideprev",
+          "value": "slideNext / slidePrev"
+        },
+        {
+          "depth": 4,
+          "slug": "you-can-trigger-the-slidenext-or-slideprev-methods-via-a-ref-to-the-carousel",
+          "value": "You can trigger the  slideNext  or  slidePrev  methods via a  ref  to the  Carousel :"
+        }
+      ]
+    },
     "mdx/renderArrow.mdx": {
       "name": "renderArrow",
       "order": 11,
@@ -467,28 +496,6 @@
         }
       ]
     },
-    "mdx/verticalMode.mdx": {
-      "name": "verticalMode",
-      "order": 3,
-      "route": "/verticalMode",
-      "menu": "Examples",
-      "id": "476b3baef72cbd65f9331611342d646b",
-      "filepath": "mdx/verticalMode.mdx",
-      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/verticalMode.mdx",
-      "slug": "mdx-vertical-mode",
-      "headings": [
-        {
-          "depth": 1,
-          "slug": "verticalmode",
-          "value": "verticalMode"
-        },
-        {
-          "depth": 4,
-          "slug": "display-and-animate-the-carousel-in-a-vertical-layout",
-          "value": "Display and animate the Carousel in a vertical layout"
-        }
-      ]
-    },
     "mdx/renderPagination.mdx": {
       "name": "renderPagination",
       "order": 11,
@@ -521,25 +528,25 @@
         }
       ]
     },
-    "mdx/slideNext.mdx": {
-      "name": "slideNext / slidePrev",
-      "order": 994,
-      "route": "/slideNext",
+    "mdx/verticalMode.mdx": {
+      "name": "verticalMode",
+      "order": 3,
+      "route": "/verticalMode",
       "menu": "Examples",
-      "id": "70cfc8eaa9911ab18a7ac7bc763b34ce",
-      "filepath": "mdx/slideNext.mdx",
-      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/slideNext.mdx",
-      "slug": "mdx-slide-next",
+      "id": "476b3baef72cbd65f9331611342d646b",
+      "filepath": "mdx/verticalMode.mdx",
+      "link": "https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/verticalMode.mdx",
+      "slug": "mdx-vertical-mode",
       "headings": [
         {
           "depth": 1,
-          "slug": "slidenext--slideprev",
-          "value": "slideNext / slidePrev"
+          "slug": "verticalmode",
+          "value": "verticalMode"
         },
         {
           "depth": 4,
-          "slug": "you-can-trigger-the-slidenext-or-slideprev-methods-via-a-ref-to-the-carousel",
-          "value": "You can trigger the  slideNext  or  slidePrev  methods via a  ref  to the  Carousel :"
+          "slug": "display-and-animate-the-carousel-in-a-vertical-layout",
+          "value": "Display and animate the Carousel in a vertical layout"
         }
       ]
     }
diff --git a/.docz/app/imports.js b/.docz/app/imports.js
index 336e516..2b2e9f0 100644
--- a/.docz/app/imports.js
+++ b/.docz/app/imports.js
@@ -5,40 +5,40 @@ export const imports = {
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-easing" */ 'mdx/easing.mdx'),
   'mdx/enableAutoPlay.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-enable-auto-play" */ 'mdx/enableAutoPlay.mdx'),
-  'mdx/goTo.mdx': () =>
-    import(/* webpackPrefetch: true, webpackChunkName: "mdx-go-to" */ 'mdx/goTo.mdx'),
   'mdx/focusOnSelect.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-focus-on-select" */ 'mdx/focusOnSelect.mdx'),
+  'mdx/goTo.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "mdx-go-to" */ 'mdx/goTo.mdx'),
   'mdx/index.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-index" */ 'mdx/index.mdx'),
   'mdx/initialFirstItem.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-initial-first-item" */ 'mdx/initialFirstItem.mdx'),
+  'mdx/itemPosition.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "mdx-item-position" */ 'mdx/itemPosition.mdx'),
   'mdx/isRTL.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-is-rtl" */ 'mdx/isRTL.mdx'),
   'mdx/itemPadding.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-item-padding" */ 'mdx/itemPadding.mdx'),
-  'mdx/itemPosition.mdx': () =>
-    import(/* webpackPrefetch: true, webpackChunkName: "mdx-item-position" */ 'mdx/itemPosition.mdx'),
   'mdx/itemsToScroll.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-items-to-scroll" */ 'mdx/itemsToScroll.mdx'),
   'mdx/itemsToShow.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-items-to-show" */ 'mdx/itemsToShow.mdx'),
-  'mdx/onNextEnd.mdx': () =>
-    import(/* webpackPrefetch: true, webpackChunkName: "mdx-on-next-end" */ 'mdx/onNextEnd.mdx'),
   'mdx/onNextStart.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-on-next-start" */ 'mdx/onNextStart.mdx'),
-  'mdx/onPrevStart.mdx': () =>
-    import(/* webpackPrefetch: true, webpackChunkName: "mdx-on-prev-start" */ 'mdx/onPrevStart.mdx'),
   'mdx/onPrevEnd.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-on-prev-end" */ 'mdx/onPrevEnd.mdx'),
+  'mdx/onNextEnd.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "mdx-on-next-end" */ 'mdx/onNextEnd.mdx'),
+  'mdx/onPrevStart.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "mdx-on-prev-start" */ 'mdx/onPrevStart.mdx'),
   'mdx/onResize.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-on-resize" */ 'mdx/onResize.mdx'),
+  'mdx/slideNext.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "mdx-slide-next" */ 'mdx/slideNext.mdx'),
   'mdx/renderArrow.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-render-arrow" */ 'mdx/renderArrow.mdx'),
-  'mdx/verticalMode.mdx': () =>
-    import(/* webpackPrefetch: true, webpackChunkName: "mdx-vertical-mode" */ 'mdx/verticalMode.mdx'),
   'mdx/renderPagination.mdx': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "mdx-render-pagination" */ 'mdx/renderPagination.mdx'),
-  'mdx/slideNext.mdx': () =>
-    import(/* webpackPrefetch: true, webpackChunkName: "mdx-slide-next" */ 'mdx/slideNext.mdx'),
+  'mdx/verticalMode.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "mdx-vertical-mode" */ 'mdx/verticalMode.mdx'),
 }
diff --git a/analytics.js b/analytics.js
new file mode 100644
index 0000000..fb8fc24
--- /dev/null
+++ b/analytics.js
@@ -0,0 +1,6 @@
+{/* <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127217040-1"></script> */}
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-127217040-1');
diff --git a/demo/assets.json b/demo/assets.json
index d2efc08..c62f14c 100644
--- a/demo/assets.json
+++ b/demo/assets.json
@@ -1,27 +1,27 @@
 {
   "vendors.js": "/react-elastic-carousel/static/js/vendors.28881de3.js",
-  "app.js": "/react-elastic-carousel/static/js/app.73f38a70.js",
+  "app.js": "/react-elastic-carousel/static/js/app.f31bcfaf.js",
   "mdx-breakpoints.js": "/react-elastic-carousel/static/js/mdx-breakpoints.8b0f7f1a.js",
   "mdx-easing.js": "/react-elastic-carousel/static/js/mdx-easing.36674c42.js",
   "mdx-enable-auto-play.js": "/react-elastic-carousel/static/js/mdx-enable-auto-play.b6a2c8d8.js",
-  "mdx-go-to.js": "/react-elastic-carousel/static/js/mdx-go-to.2f9e272e.js",
-  "mdx-focus-on-select.js": "/react-elastic-carousel/static/js/mdx-focus-on-select.e0518d92.js",
+  "mdx-focus-on-select.js": "/react-elastic-carousel/static/js/mdx-focus-on-select.9cbe56ec.js",
+  "mdx-go-to.js": "/react-elastic-carousel/static/js/mdx-go-to.81eac1b1.js",
   "mdx-index.js": "/react-elastic-carousel/static/js/mdx-index.ef487804.js",
   "mdx-initial-first-item.js": "/react-elastic-carousel/static/js/mdx-initial-first-item.d5356dc4.js",
-  "mdx-is-rtl.js": "/react-elastic-carousel/static/js/mdx-is-rtl.f2cf858c.js",
-  "mdx-item-padding.js": "/react-elastic-carousel/static/js/mdx-item-padding.27798ebf.js",
-  "mdx-item-position.js": "/react-elastic-carousel/static/js/mdx-item-position.c2529f2f.js",
+  "mdx-item-position.js": "/react-elastic-carousel/static/js/mdx-item-position.9edf723c.js",
+  "mdx-is-rtl.js": "/react-elastic-carousel/static/js/mdx-is-rtl.1a8626f6.js",
+  "mdx-item-padding.js": "/react-elastic-carousel/static/js/mdx-item-padding.89a83484.js",
   "mdx-items-to-scroll.js": "/react-elastic-carousel/static/js/mdx-items-to-scroll.66b1c473.js",
   "mdx-items-to-show.js": "/react-elastic-carousel/static/js/mdx-items-to-show.134555c9.js",
-  "mdx-on-next-end.js": "/react-elastic-carousel/static/js/mdx-on-next-end.c03dd7e6.js",
-  "mdx-on-next-start.js": "/react-elastic-carousel/static/js/mdx-on-next-start.b408cffe.js",
-  "mdx-on-prev-start.js": "/react-elastic-carousel/static/js/mdx-on-prev-start.4b5257a3.js",
-  "mdx-on-prev-end.js": "/react-elastic-carousel/static/js/mdx-on-prev-end.0291ea17.js",
+  "mdx-on-next-start.js": "/react-elastic-carousel/static/js/mdx-on-next-start.e2ca4a95.js",
+  "mdx-on-prev-end.js": "/react-elastic-carousel/static/js/mdx-on-prev-end.891bfaaf.js",
+  "mdx-on-next-end.js": "/react-elastic-carousel/static/js/mdx-on-next-end.3e5221f4.js",
+  "mdx-on-prev-start.js": "/react-elastic-carousel/static/js/mdx-on-prev-start.0e294702.js",
   "mdx-on-resize.js": "/react-elastic-carousel/static/js/mdx-on-resize.75769ad9.js",
-  "mdx-render-arrow.js": "/react-elastic-carousel/static/js/mdx-render-arrow.a1c5a675.js",
-  "mdx-vertical-mode.js": "/react-elastic-carousel/static/js/mdx-vertical-mode.3fb9fdc7.js",
+  "mdx-slide-next.js": "/react-elastic-carousel/static/js/mdx-slide-next.635d605f.js",
+  "mdx-render-arrow.js": "/react-elastic-carousel/static/js/mdx-render-arrow.c08208c7.js",
   "mdx-render-pagination.js": "/react-elastic-carousel/static/js/mdx-render-pagination.af3ad6e8.js",
-  "mdx-slide-next.js": "/react-elastic-carousel/static/js/mdx-slide-next.1fdb5e4a.js",
-  "runtime~app.js": "/react-elastic-carousel/static/js/runtime~app.9c9e323fb06637a3c830.js",
+  "mdx-vertical-mode.js": "/react-elastic-carousel/static/js/mdx-vertical-mode.c5283b12.js",
+  "runtime~app.js": "/react-elastic-carousel/static/js/runtime~app.e5afd0a5349f4d7172db.js",
   "index.html": "/react-elastic-carousel/index.html"
 }
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index ce3b16b..ca3cc70 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="description" content="A flexible and responsive carousel component for react"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-elastic-carousel</title><link rel="stylesheet" href="https://unpkg.com/codemirror@5.39.2/lib/codemirror.css"/><link rel="stylesheet" href="//codemirror.net/theme/dracula.css"></head><body><div id="root"/><script src="/react-elastic-carousel/static/js/runtime~app.9c9e323fb06637a3c830.js"></script><script src="/react-elastic-carousel/static/js/vendors.28881de3.js"></script><script src="/react-elastic-carousel/static/js/app.73f38a70.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="description" content="A flexible and responsive carousel component for react"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-elastic-carousel</title><link rel="stylesheet" href="https://unpkg.com/codemirror@5.39.2/lib/codemirror.css"/><link rel="stylesheet" href="//codemirror.net/theme/dracula.css"><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-127217040-1")</script><script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-127217040-1"></script></head><body><div id="root"/><script src="/react-elastic-carousel/static/js/runtime~app.e5afd0a5349f4d7172db.js"></script><script src="/react-elastic-carousel/static/js/vendors.28881de3.js"></script><script src="/react-elastic-carousel/static/js/app.f31bcfaf.js"></script></body></html>
\ No newline at end of file
diff --git a/demo/static/js/app.73f38a70.js b/demo/static/js/app.73f38a70.js
deleted file mode 100644
index be77435..0000000
--- a/demo/static/js/app.73f38a70.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{"./.docz/app/db.json":function(e){e.exports={config:{title:"react-elastic-carousel",description:"A flexible and responsive carousel component for react",themeConfig:{mode:"light",codemirrorTheme:"dracula",styles:{body:{fontFamily:"'Source Sans Pro', Helvetica, sans-serif",fontSize:16,lineHeight:1.6},container:{width:"100%",padding:["20px 40px","20px 40px"]}}},ordering:"ascending",version:"0.1.17",repository:"https://github.com/sag1v/react-elastic-carousel",native:!1,src:"./src/docs",dest:"./demo",port:8888,hashRouter:!0,base:"/react-elastic-carousel/",htmlContext:{head:{links:[{rel:"stylesheet",href:"//codemirror.net/theme/dracula.css"}]}}},entries:{"mdx/breakpoints.mdx":{name:"breakPoints",order:3,route:"/breakPoints",menu:"Examples",id:"f6a48a27e5054ccbc3c8fe4e89b91d6b",filepath:"mdx/breakpoints.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/breakpoints.mdx",slug:"mdx-breakpoints",headings:[{depth:1,slug:"breakpoints",value:"breakPoints"},{depth:4,slug:"you-can-pass-an-array-of-objects-that-will-signal-react-elastic-carousel-to-change-props-like-itemstoshow-and-itemstoscroll-on-different-width-values",value:"You can pass an array of objects that will signal  react-elastic-carousel  to change props like  itemsToShow  and  itemsToScroll  on different  width  values."},{depth:2,slug:"example",value:"Example"}]},"mdx/easing.mdx":{name:"easing",order:10,route:"/easing",menu:"Examples",id:"74e08dc0e1d1c6685b946008e35df874",filepath:"mdx/easing.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/easing.mdx",slug:"mdx-easing",headings:[{depth:1,slug:"easing",value:"easing"},{depth:4,slug:"you-can-pass-an-easing-pattern-for-the-animations",value:"You can pass an easing pattern for the animations"}]},"mdx/enableAutoPlay.mdx":{name:"enableAutoPlay",order:7,route:"/enableAutoPlay",menu:"Examples",id:"29c4ecc66acacd3bf0adba5cf3392524",filepath:"mdx/enableAutoPlay.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/enableAutoPlay.mdx",slug:"mdx-enable-auto-play",headings:[{depth:1,slug:"enableautoplay",value:"enableAutoPlay"},{depth:4,slug:"toggle-enableautoplay-and-set-autoplayspeed-as-you-wish",value:"Toggle  enableAutoPlay  and set  autoPlaySpeed  as you wish"}]},"mdx/goTo.mdx":{name:"goTo",order:989,route:"/goTo",menu:"Examples",id:"0d9b9869868b7d346d28d47233378890",filepath:"mdx/goTo.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/goTo.mdx",slug:"mdx-go-to",headings:[{depth:1,slug:"goto",value:"goTo"},{depth:4,slug:"you-can-trigger-the-goto-method-via-a-ref-to-the-carousel",value:"You can trigger the  goTo  method via a  ref  to the  Carousel :"}]},"mdx/focusOnSelect.mdx":{name:"focusOnSelect",order:5,route:"/focusOnSelect",menu:"Examples",id:"6ed5d03c60339f008d3a8a9765237026",filepath:"mdx/focusOnSelect.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/focusOnSelect.mdx",slug:"mdx-focus-on-select",headings:[{depth:1,slug:"focusonselect",value:"focusOnSelect"},{depth:4,slug:"sliding-to-an-item-on-click",value:"Sliding to an item on click"}]},"mdx/index.mdx":{name:"Getting started",route:"/",id:"feecdcc77eed3427ff64d13decdfea87",filepath:"mdx/index.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/index.mdx",slug:"mdx-index",order:0,menu:null,headings:[{depth:1,slug:"getting-started",value:"Getting started"},{depth:2,slug:"install",value:"install"},{depth:2,slug:"import",value:"Import"},{depth:2,slug:"play",value:"play"},{depth:2,slug:"props",value:"Props"}]},"mdx/initialFirstItem.mdx":{name:"initialFirstItem",order:4,route:"/initialFirstItem",menu:"Examples",id:"76a5739de06d728534049c3762ad9a66",filepath:"mdx/initialFirstItem.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/initialFirstItem.mdx",slug:"mdx-initial-first-item",headings:[{depth:1,slug:"initialfirstitem",value:"initialFirstItem"},{depth:4,slug:"the-first-active-item-on-mount",value:"The first active item on mount"}]},"mdx/isRTL.mdx":{name:"isRTL",order:6,route:"/isRTL",menu:"Examples",id:"c4f7997e95e43791f89e3a691bfbfb47",filepath:"mdx/isRTL.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/isRTL.mdx",slug:"mdx-is-rtl",headings:[{depth:1,slug:"isrtl",value:"isRTL"},{depth:4,slug:"support-for-right-to-left-layouts",value:"Support for  right-to-left  layouts"}]},"mdx/itemPadding.mdx":{name:"itemPadding",order:8,route:"/itemPadding",menu:"Examples",id:"b68514d0135666cc912ddd8403d31d11",filepath:"mdx/itemPadding.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemPadding.mdx",slug:"mdx-item-padding",headings:[{depth:1,slug:"itempadding",value:"itemPadding"},{depth:4,slug:"sets-a-padding-to-the-wrapping-element-of-each-item",value:"Sets a  padding  to the wrapping element of each item"}]},"mdx/itemPosition.mdx":{name:"itemPosition",order:9,route:"/itemPosition",menu:"Examples",id:"76a6425c8af9dc748f704aee745e416e",filepath:"mdx/itemPosition.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemPosition.mdx",slug:"mdx-item-position",headings:[{depth:1,slug:"itemposition",value:"itemPosition"},{depth:4,slug:"sets-the-position-of-the-item-within-the-items-wrapper",value:"Sets the position of the item within the item's wrapper."}]},"mdx/itemsToScroll.mdx":{name:"itemsToScroll",order:2,route:"/itemsToScroll",menu:"Examples",id:"7f6f10b354a71a0fe33d0742ef4bd5ba",filepath:"mdx/itemsToScroll.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemsToScroll.mdx",slug:"mdx-items-to-scroll",headings:[{depth:1,slug:"itemstoscroll",value:"itemsToScroll"},{depth:4,slug:"number-of-items-to-scroll",value:"Number of items to scroll"}]},"mdx/itemsToShow.mdx":{name:"itemsToShow",order:1,route:"/itemsToShow",menu:"Examples",id:"a9606fa08754b34ebfd1b8afdb09a627",filepath:"mdx/itemsToShow.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemsToShow.mdx",slug:"mdx-items-to-show",headings:[{depth:1,slug:"itemstoshow",value:"itemsToShow"},{depth:4,slug:"number-of-visible-items",value:"Number of visible items"}]},"mdx/onNextEnd.mdx":{name:"onNextEnd",order:991,route:"/onNextEnd",menu:"Examples",id:"252226ec0e74a4c6191f7c27e27ab109",filepath:"mdx/onNextEnd.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onNextEnd.mdx",slug:"mdx-on-next-end",headings:[{depth:1,slug:"onnextend",value:"onNextEnd"},{depth:4,slug:"onnextend-will-pass-the-new-current-item-object",value:"onNextEnd  will pass the new    item-object :"}]},"mdx/onNextStart.mdx":{name:"onNextStart",order:990,route:"/onNextStart",menu:"Examples",id:"2d0ad71c220798c8ad6754e95f1436cf",filepath:"mdx/onNextStart.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onNextStart.mdx",slug:"mdx-on-next-start",headings:[{depth:1,slug:"onnextstart",value:"onNextStart"},{depth:4,slug:"onnextstart-will-pass-both-the-current-and-next-item-object",value:"onNextStart  will pass both the   and    item-object :"}]},"mdx/onPrevStart.mdx":{name:"onPrevStart",order:992,route:"/onPrevStart",menu:"Examples",id:"7dc068d4b5d88e53563c61b61cbd99a4",filepath:"mdx/onPrevStart.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onPrevStart.mdx",slug:"mdx-on-prev-start",headings:[{depth:1,slug:"onprevstart",value:"onPrevStart"},{depth:4,slug:"onprevstart-will-pass-both-the-current-and-next-item-object",value:"onPrevStart  will pass both the   and    item-object :"}]},"mdx/onPrevEnd.mdx":{name:"onPrevEnd",order:993,route:"/onPrevEnd",menu:"Examples",id:"bdace8475c6734e4203406c1abecff98",filepath:"mdx/onPrevEnd.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onPrevEnd.mdx",slug:"mdx-on-prev-end",headings:[{depth:1,slug:"onprevend",value:"onPrevEnd"},{depth:4,slug:"onprevend-will-pass-the-new-current-item-object",value:"onPrevEnd  will pass the new    item-object :"}]},"mdx/onResize.mdx":{name:"onResize",order:995,route:"/onResize",menu:"Examples",id:"eee22fe9ebecb3be389da92d8b9b15d8",filepath:"mdx/onResize.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onResize.mdx",slug:"mdx-on-resize",headings:[{depth:1,slug:"onresize",value:"onResize"},{depth:4,slug:"you-can-listen-to-the-onresize-event-of-the-carousel-this-will-get-invoked-on-each-resize-event-of-the-root-element-and-will-return-the-current-breakpoint-object-being-used",value:"You can listen to the  onResize  event of the  Carousel , this will get invoked on each  resize  event of the root element and will return the current  breakPoint  object being used:"}]},"mdx/renderArrow.mdx":{name:"renderArrow",order:11,route:"/renderArrow",menu:"Examples",id:"87a5c20c345f10cdedfb7b49befb6b18",filepath:"mdx/renderArrow.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/renderArrow.mdx",slug:"mdx-render-arrow",headings:[{depth:1,slug:"renderarrow",value:"renderArrow"},{depth:3,slug:"you-can-provide-custom-arrow-buttons",value:"You can provide custom Arrow buttons."},{depth:2,slug:"signature",value:"Signature"},{depth:2,slug:"demo",value:"Demo"}]},"mdx/verticalMode.mdx":{name:"verticalMode",order:3,route:"/verticalMode",menu:"Examples",id:"476b3baef72cbd65f9331611342d646b",filepath:"mdx/verticalMode.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/verticalMode.mdx",slug:"mdx-vertical-mode",headings:[{depth:1,slug:"verticalmode",value:"verticalMode"},{depth:4,slug:"display-and-animate-the-carousel-in-a-vertical-layout",value:"Display and animate the Carousel in a vertical layout"}]},"mdx/renderPagination.mdx":{name:"renderPagination",order:11,route:"/renderPagination",menu:"Examples",id:"bc25c78882bf4efdc17f346ca13e25da",filepath:"mdx/renderPagination.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/renderPagination.mdx",slug:"mdx-render-pagination",headings:[{depth:1,slug:"renderpagination",value:"renderPagination"},{depth:3,slug:"you-can-provide-custom-pagination-buttons",value:"You can provide custom pagination buttons."},{depth:2,slug:"signature",value:"Signature"},{depth:2,slug:"demo",value:"Demo"}]},"mdx/slideNext.mdx":{name:"slideNext / slidePrev",order:994,route:"/slideNext",menu:"Examples",id:"70cfc8eaa9911ab18a7ac7bc763b34ce",filepath:"mdx/slideNext.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/slideNext.mdx",slug:"mdx-slide-next",headings:[{depth:1,slug:"slidenext--slideprev",value:"slideNext / slidePrev"},{depth:4,slug:"you-can-trigger-the-slidenext-or-slideprev-methods-via-a-ref-to-the-carousel",value:"You can trigger the  slideNext  or  slidePrev  methods via a  ref  to the  Carousel :"}]}}}},"./.docz/app/imports.js":function(e,t,d){"use strict";d.d(t,"a",function(){return s});var s={"mdx/breakpoints.mdx":function(){return Promise.all([d.e(0),d.e(2)]).then(d.bind(null,"./src/docs/mdx/breakpoints.mdx"))},"mdx/easing.mdx":function(){return Promise.all([d.e(0),d.e(3)]).then(d.bind(null,"./src/docs/mdx/easing.mdx"))},"mdx/enableAutoPlay.mdx":function(){return Promise.all([d.e(0),d.e(4)]).then(d.bind(null,"./src/docs/mdx/enableAutoPlay.mdx"))},"mdx/goTo.mdx":function(){return Promise.all([d.e(0),d.e(5)]).then(d.bind(null,"./src/docs/mdx/goTo.mdx"))},"mdx/focusOnSelect.mdx":function(){return Promise.all([d.e(0),d.e(6)]).then(d.bind(null,"./src/docs/mdx/focusOnSelect.mdx"))},"mdx/index.mdx":function(){return Promise.all([d.e(0),d.e(7)]).then(d.bind(null,"./src/docs/mdx/index.mdx"))},"mdx/initialFirstItem.mdx":function(){return Promise.all([d.e(0),d.e(8)]).then(d.bind(null,"./src/docs/mdx/initialFirstItem.mdx"))},"mdx/isRTL.mdx":function(){return Promise.all([d.e(0),d.e(9)]).then(d.bind(null,"./src/docs/mdx/isRTL.mdx"))},"mdx/itemPadding.mdx":function(){return Promise.all([d.e(0),d.e(10)]).then(d.bind(null,"./src/docs/mdx/itemPadding.mdx"))},"mdx/itemPosition.mdx":function(){return Promise.all([d.e(0),d.e(11)]).then(d.bind(null,"./src/docs/mdx/itemPosition.mdx"))},"mdx/itemsToScroll.mdx":function(){return Promise.all([d.e(0),d.e(12)]).then(d.bind(null,"./src/docs/mdx/itemsToScroll.mdx"))},"mdx/itemsToShow.mdx":function(){return Promise.all([d.e(0),d.e(13)]).then(d.bind(null,"./src/docs/mdx/itemsToShow.mdx"))},"mdx/onNextEnd.mdx":function(){return Promise.all([d.e(0),d.e(14)]).then(d.bind(null,"./src/docs/mdx/onNextEnd.mdx"))},"mdx/onNextStart.mdx":function(){return Promise.all([d.e(0),d.e(15)]).then(d.bind(null,"./src/docs/mdx/onNextStart.mdx"))},"mdx/onPrevStart.mdx":function(){return Promise.all([d.e(0),d.e(16)]).then(d.bind(null,"./src/docs/mdx/onPrevStart.mdx"))},"mdx/onPrevEnd.mdx":function(){return Promise.all([d.e(0),d.e(17)]).then(d.bind(null,"./src/docs/mdx/onPrevEnd.mdx"))},"mdx/onResize.mdx":function(){return Promise.all([d.e(0),d.e(18)]).then(d.bind(null,"./src/docs/mdx/onResize.mdx"))},"mdx/renderArrow.mdx":function(){return Promise.all([d.e(0),d.e(19)]).then(d.bind(null,"./src/docs/mdx/renderArrow.mdx"))},"mdx/verticalMode.mdx":function(){return Promise.all([d.e(0),d.e(20)]).then(d.bind(null,"./src/docs/mdx/verticalMode.mdx"))},"mdx/renderPagination.mdx":function(){return Promise.all([d.e(0),d.e(21)]).then(d.bind(null,"./src/docs/mdx/renderPagination.mdx"))},"mdx/slideNext.mdx":function(){return Promise.all([d.e(0),d.e(22)]).then(d.bind(null,"./src/docs/mdx/slideNext.mdx"))}}},"./.docz/app/index.jsx":function(e,t,d){"use strict";d.r(t);var s=d("./node_modules/react/index.js"),o=d.n(s),a=d("./node_modules/react-dom/index.js"),n=d.n(a),i=d("./.docz/app/root.jsx"),r=[],l=[],m=function(){return l.forEach(function(e){return e&&e()})},c=document.querySelector("#root");!function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i.a;r.forEach(function(e){return e&&e()}),n.a.render(o.a.createElement(e,null),c,m)}(i.a)},"./.docz/app/root.jsx":function(e,t,d){"use strict";(function(e){var s=d("./node_modules/react/index.js"),o=d.n(s),a=d("./node_modules/react-hot-loader/index.js"),n=d("./node_modules/docz-theme-default/dist/index.js"),i=d.n(n),r=d("./.docz/app/imports.js"),l=d("./.docz/app/db.json"),m=function(){return o.a.createElement(i.a,{db:l,imports:r.a,hashRouter:!0})};t.a=Object(a.hot)(e)(m),m.__docgenInfo={description:"",methods:[],displayName:"Root"}}).call(this,d("./node_modules/webpack/buildin/harmony-module.js")(e))},0:function(e,t,d){d("./node_modules/@babel/polyfill/lib/index.js"),e.exports=d("./.docz/app/index.jsx")}},[[0,23,0]],[0,2,3,4,6,5,7,8,9,10,11,12,13,14,15,17,16,18,19,21,22,20]]);
\ No newline at end of file
diff --git a/demo/static/js/app.f31bcfaf.js b/demo/static/js/app.f31bcfaf.js
new file mode 100644
index 0000000..7c1dcc6
--- /dev/null
+++ b/demo/static/js/app.f31bcfaf.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{"./.docz/app/db.json":function(e){e.exports={config:{title:"react-elastic-carousel",description:"A flexible and responsive carousel component for react",themeConfig:{mode:"light",codemirrorTheme:"dracula",styles:{body:{fontFamily:"'Source Sans Pro', Helvetica, sans-serif",fontSize:16,lineHeight:1.6},container:{width:"100%",padding:["20px 40px","20px 40px"]}}},ordering:"ascending",version:"0.1.18",repository:"https://github.com/sag1v/react-elastic-carousel",native:!1,src:"./src/docs",dest:"./demo",port:8888,hashRouter:!0,base:"/react-elastic-carousel/",htmlContext:{head:{scripts:[{async:"async",src:"https://www.googletagmanager.com/gtag/js?id=UA-127217040-1"}],raw:"<script>\n              window.dataLayer = window.dataLayer || [];\n              function gtag(){dataLayer.push(arguments);}\n              gtag('js', new Date());\n              gtag('config', 'UA-127217040-1');\n            <\/script>",links:[{rel:"stylesheet",href:"//codemirror.net/theme/dracula.css"}]}}},entries:{"mdx/breakpoints.mdx":{name:"breakPoints",order:3,route:"/breakPoints",menu:"Examples",id:"f6a48a27e5054ccbc3c8fe4e89b91d6b",filepath:"mdx/breakpoints.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/breakpoints.mdx",slug:"mdx-breakpoints",headings:[{depth:1,slug:"breakpoints",value:"breakPoints"},{depth:4,slug:"you-can-pass-an-array-of-objects-that-will-signal-react-elastic-carousel-to-change-props-like-itemstoshow-and-itemstoscroll-on-different-width-values",value:"You can pass an array of objects that will signal  react-elastic-carousel  to change props like  itemsToShow  and  itemsToScroll  on different  width  values."},{depth:2,slug:"example",value:"Example"}]},"mdx/easing.mdx":{name:"easing",order:10,route:"/easing",menu:"Examples",id:"74e08dc0e1d1c6685b946008e35df874",filepath:"mdx/easing.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/easing.mdx",slug:"mdx-easing",headings:[{depth:1,slug:"easing",value:"easing"},{depth:4,slug:"you-can-pass-an-easing-pattern-for-the-animations",value:"You can pass an easing pattern for the animations"}]},"mdx/enableAutoPlay.mdx":{name:"enableAutoPlay",order:7,route:"/enableAutoPlay",menu:"Examples",id:"29c4ecc66acacd3bf0adba5cf3392524",filepath:"mdx/enableAutoPlay.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/enableAutoPlay.mdx",slug:"mdx-enable-auto-play",headings:[{depth:1,slug:"enableautoplay",value:"enableAutoPlay"},{depth:4,slug:"toggle-enableautoplay-and-set-autoplayspeed-as-you-wish",value:"Toggle  enableAutoPlay  and set  autoPlaySpeed  as you wish"}]},"mdx/focusOnSelect.mdx":{name:"focusOnSelect",order:5,route:"/focusOnSelect",menu:"Examples",id:"6ed5d03c60339f008d3a8a9765237026",filepath:"mdx/focusOnSelect.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/focusOnSelect.mdx",slug:"mdx-focus-on-select",headings:[{depth:1,slug:"focusonselect",value:"focusOnSelect"},{depth:4,slug:"sliding-to-an-item-on-click",value:"Sliding to an item on click"}]},"mdx/goTo.mdx":{name:"goTo",order:989,route:"/goTo",menu:"Examples",id:"0d9b9869868b7d346d28d47233378890",filepath:"mdx/goTo.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/goTo.mdx",slug:"mdx-go-to",headings:[{depth:1,slug:"goto",value:"goTo"},{depth:4,slug:"you-can-trigger-the-goto-method-via-a-ref-to-the-carousel",value:"You can trigger the  goTo  method via a  ref  to the  Carousel :"}]},"mdx/index.mdx":{name:"Getting started",route:"/",id:"feecdcc77eed3427ff64d13decdfea87",filepath:"mdx/index.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/index.mdx",slug:"mdx-index",order:0,menu:null,headings:[{depth:1,slug:"getting-started",value:"Getting started"},{depth:2,slug:"install",value:"install"},{depth:2,slug:"import",value:"Import"},{depth:2,slug:"play",value:"play"},{depth:2,slug:"props",value:"Props"}]},"mdx/initialFirstItem.mdx":{name:"initialFirstItem",order:4,route:"/initialFirstItem",menu:"Examples",id:"76a5739de06d728534049c3762ad9a66",filepath:"mdx/initialFirstItem.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/initialFirstItem.mdx",slug:"mdx-initial-first-item",headings:[{depth:1,slug:"initialfirstitem",value:"initialFirstItem"},{depth:4,slug:"the-first-active-item-on-mount",value:"The first active item on mount"}]},"mdx/itemPosition.mdx":{name:"itemPosition",order:9,route:"/itemPosition",menu:"Examples",id:"76a6425c8af9dc748f704aee745e416e",filepath:"mdx/itemPosition.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemPosition.mdx",slug:"mdx-item-position",headings:[{depth:1,slug:"itemposition",value:"itemPosition"},{depth:4,slug:"sets-the-position-of-the-item-within-the-items-wrapper",value:"Sets the position of the item within the item's wrapper."}]},"mdx/isRTL.mdx":{name:"isRTL",order:6,route:"/isRTL",menu:"Examples",id:"c4f7997e95e43791f89e3a691bfbfb47",filepath:"mdx/isRTL.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/isRTL.mdx",slug:"mdx-is-rtl",headings:[{depth:1,slug:"isrtl",value:"isRTL"},{depth:4,slug:"support-for-right-to-left-layouts",value:"Support for  right-to-left  layouts"}]},"mdx/itemPadding.mdx":{name:"itemPadding",order:8,route:"/itemPadding",menu:"Examples",id:"b68514d0135666cc912ddd8403d31d11",filepath:"mdx/itemPadding.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemPadding.mdx",slug:"mdx-item-padding",headings:[{depth:1,slug:"itempadding",value:"itemPadding"},{depth:4,slug:"sets-a-padding-to-the-wrapping-element-of-each-item",value:"Sets a  padding  to the wrapping element of each item"}]},"mdx/itemsToScroll.mdx":{name:"itemsToScroll",order:2,route:"/itemsToScroll",menu:"Examples",id:"7f6f10b354a71a0fe33d0742ef4bd5ba",filepath:"mdx/itemsToScroll.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemsToScroll.mdx",slug:"mdx-items-to-scroll",headings:[{depth:1,slug:"itemstoscroll",value:"itemsToScroll"},{depth:4,slug:"number-of-items-to-scroll",value:"Number of items to scroll"}]},"mdx/itemsToShow.mdx":{name:"itemsToShow",order:1,route:"/itemsToShow",menu:"Examples",id:"a9606fa08754b34ebfd1b8afdb09a627",filepath:"mdx/itemsToShow.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/itemsToShow.mdx",slug:"mdx-items-to-show",headings:[{depth:1,slug:"itemstoshow",value:"itemsToShow"},{depth:4,slug:"number-of-visible-items",value:"Number of visible items"}]},"mdx/onNextStart.mdx":{name:"onNextStart",order:990,route:"/onNextStart",menu:"Examples",id:"2d0ad71c220798c8ad6754e95f1436cf",filepath:"mdx/onNextStart.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onNextStart.mdx",slug:"mdx-on-next-start",headings:[{depth:1,slug:"onnextstart",value:"onNextStart"},{depth:4,slug:"onnextstart-will-pass-both-the-current-and-next-item-object",value:"onNextStart  will pass both the   and    item-object :"}]},"mdx/onPrevEnd.mdx":{name:"onPrevEnd",order:993,route:"/onPrevEnd",menu:"Examples",id:"bdace8475c6734e4203406c1abecff98",filepath:"mdx/onPrevEnd.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onPrevEnd.mdx",slug:"mdx-on-prev-end",headings:[{depth:1,slug:"onprevend",value:"onPrevEnd"},{depth:4,slug:"onprevend-will-pass-the-new-current-item-object",value:"onPrevEnd  will pass the new    item-object :"}]},"mdx/onNextEnd.mdx":{name:"onNextEnd",order:991,route:"/onNextEnd",menu:"Examples",id:"252226ec0e74a4c6191f7c27e27ab109",filepath:"mdx/onNextEnd.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onNextEnd.mdx",slug:"mdx-on-next-end",headings:[{depth:1,slug:"onnextend",value:"onNextEnd"},{depth:4,slug:"onnextend-will-pass-the-new-current-item-object",value:"onNextEnd  will pass the new    item-object :"}]},"mdx/onPrevStart.mdx":{name:"onPrevStart",order:992,route:"/onPrevStart",menu:"Examples",id:"7dc068d4b5d88e53563c61b61cbd99a4",filepath:"mdx/onPrevStart.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onPrevStart.mdx",slug:"mdx-on-prev-start",headings:[{depth:1,slug:"onprevstart",value:"onPrevStart"},{depth:4,slug:"onprevstart-will-pass-both-the-current-and-next-item-object",value:"onPrevStart  will pass both the   and    item-object :"}]},"mdx/onResize.mdx":{name:"onResize",order:995,route:"/onResize",menu:"Examples",id:"eee22fe9ebecb3be389da92d8b9b15d8",filepath:"mdx/onResize.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/onResize.mdx",slug:"mdx-on-resize",headings:[{depth:1,slug:"onresize",value:"onResize"},{depth:4,slug:"you-can-listen-to-the-onresize-event-of-the-carousel-this-will-get-invoked-on-each-resize-event-of-the-root-element-and-will-return-the-current-breakpoint-object-being-used",value:"You can listen to the  onResize  event of the  Carousel , this will get invoked on each  resize  event of the root element and will return the current  breakPoint  object being used:"}]},"mdx/slideNext.mdx":{name:"slideNext / slidePrev",order:994,route:"/slideNext",menu:"Examples",id:"70cfc8eaa9911ab18a7ac7bc763b34ce",filepath:"mdx/slideNext.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/slideNext.mdx",slug:"mdx-slide-next",headings:[{depth:1,slug:"slidenext--slideprev",value:"slideNext / slidePrev"},{depth:4,slug:"you-can-trigger-the-slidenext-or-slideprev-methods-via-a-ref-to-the-carousel",value:"You can trigger the  slideNext  or  slidePrev  methods via a  ref  to the  Carousel :"}]},"mdx/renderArrow.mdx":{name:"renderArrow",order:11,route:"/renderArrow",menu:"Examples",id:"87a5c20c345f10cdedfb7b49befb6b18",filepath:"mdx/renderArrow.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/renderArrow.mdx",slug:"mdx-render-arrow",headings:[{depth:1,slug:"renderarrow",value:"renderArrow"},{depth:3,slug:"you-can-provide-custom-arrow-buttons",value:"You can provide custom Arrow buttons."},{depth:2,slug:"signature",value:"Signature"},{depth:2,slug:"demo",value:"Demo"}]},"mdx/renderPagination.mdx":{name:"renderPagination",order:11,route:"/renderPagination",menu:"Examples",id:"bc25c78882bf4efdc17f346ca13e25da",filepath:"mdx/renderPagination.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/renderPagination.mdx",slug:"mdx-render-pagination",headings:[{depth:1,slug:"renderpagination",value:"renderPagination"},{depth:3,slug:"you-can-provide-custom-pagination-buttons",value:"You can provide custom pagination buttons."},{depth:2,slug:"signature",value:"Signature"},{depth:2,slug:"demo",value:"Demo"}]},"mdx/verticalMode.mdx":{name:"verticalMode",order:3,route:"/verticalMode",menu:"Examples",id:"476b3baef72cbd65f9331611342d646b",filepath:"mdx/verticalMode.mdx",link:"https://github.com/sag1v/react-elastic-carousel\\edit\\master\\src\\docs\\mdx/verticalMode.mdx",slug:"mdx-vertical-mode",headings:[{depth:1,slug:"verticalmode",value:"verticalMode"},{depth:4,slug:"display-and-animate-the-carousel-in-a-vertical-layout",value:"Display and animate the Carousel in a vertical layout"}]}}}},"./.docz/app/imports.js":function(e,t,d){"use strict";d.d(t,"a",function(){return a});var a={"mdx/breakpoints.mdx":function(){return Promise.all([d.e(0),d.e(2)]).then(d.bind(null,"./src/docs/mdx/breakpoints.mdx"))},"mdx/easing.mdx":function(){return Promise.all([d.e(0),d.e(3)]).then(d.bind(null,"./src/docs/mdx/easing.mdx"))},"mdx/enableAutoPlay.mdx":function(){return Promise.all([d.e(0),d.e(4)]).then(d.bind(null,"./src/docs/mdx/enableAutoPlay.mdx"))},"mdx/focusOnSelect.mdx":function(){return Promise.all([d.e(0),d.e(5)]).then(d.bind(null,"./src/docs/mdx/focusOnSelect.mdx"))},"mdx/goTo.mdx":function(){return Promise.all([d.e(0),d.e(6)]).then(d.bind(null,"./src/docs/mdx/goTo.mdx"))},"mdx/index.mdx":function(){return Promise.all([d.e(0),d.e(7)]).then(d.bind(null,"./src/docs/mdx/index.mdx"))},"mdx/initialFirstItem.mdx":function(){return Promise.all([d.e(0),d.e(8)]).then(d.bind(null,"./src/docs/mdx/initialFirstItem.mdx"))},"mdx/itemPosition.mdx":function(){return Promise.all([d.e(0),d.e(9)]).then(d.bind(null,"./src/docs/mdx/itemPosition.mdx"))},"mdx/isRTL.mdx":function(){return Promise.all([d.e(0),d.e(10)]).then(d.bind(null,"./src/docs/mdx/isRTL.mdx"))},"mdx/itemPadding.mdx":function(){return Promise.all([d.e(0),d.e(11)]).then(d.bind(null,"./src/docs/mdx/itemPadding.mdx"))},"mdx/itemsToScroll.mdx":function(){return Promise.all([d.e(0),d.e(12)]).then(d.bind(null,"./src/docs/mdx/itemsToScroll.mdx"))},"mdx/itemsToShow.mdx":function(){return Promise.all([d.e(0),d.e(13)]).then(d.bind(null,"./src/docs/mdx/itemsToShow.mdx"))},"mdx/onNextStart.mdx":function(){return Promise.all([d.e(0),d.e(14)]).then(d.bind(null,"./src/docs/mdx/onNextStart.mdx"))},"mdx/onPrevEnd.mdx":function(){return Promise.all([d.e(0),d.e(15)]).then(d.bind(null,"./src/docs/mdx/onPrevEnd.mdx"))},"mdx/onNextEnd.mdx":function(){return Promise.all([d.e(0),d.e(16)]).then(d.bind(null,"./src/docs/mdx/onNextEnd.mdx"))},"mdx/onPrevStart.mdx":function(){return Promise.all([d.e(0),d.e(17)]).then(d.bind(null,"./src/docs/mdx/onPrevStart.mdx"))},"mdx/onResize.mdx":function(){return Promise.all([d.e(0),d.e(18)]).then(d.bind(null,"./src/docs/mdx/onResize.mdx"))},"mdx/slideNext.mdx":function(){return Promise.all([d.e(0),d.e(19)]).then(d.bind(null,"./src/docs/mdx/slideNext.mdx"))},"mdx/renderArrow.mdx":function(){return Promise.all([d.e(0),d.e(20)]).then(d.bind(null,"./src/docs/mdx/renderArrow.mdx"))},"mdx/renderPagination.mdx":function(){return Promise.all([d.e(0),d.e(21)]).then(d.bind(null,"./src/docs/mdx/renderPagination.mdx"))},"mdx/verticalMode.mdx":function(){return Promise.all([d.e(0),d.e(22)]).then(d.bind(null,"./src/docs/mdx/verticalMode.mdx"))}}},"./.docz/app/index.jsx":function(e,t,d){"use strict";d.r(t);var a=d("./node_modules/react/index.js"),n=d.n(a),s=d("./node_modules/react-dom/index.js"),o=d.n(s),i=d("./.docz/app/root.jsx"),r=[],l=[],m=function(){return l.forEach(function(e){return e&&e()})},c=document.querySelector("#root");!function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i.a;r.forEach(function(e){return e&&e()}),o.a.render(n.a.createElement(e,null),c,m)}(i.a)},"./.docz/app/root.jsx":function(e,t,d){"use strict";(function(e){var a=d("./node_modules/react/index.js"),n=d.n(a),s=d("./node_modules/react-hot-loader/index.js"),o=d("./node_modules/docz-theme-default/dist/index.js"),i=d.n(o),r=d("./.docz/app/imports.js"),l=d("./.docz/app/db.json"),m=function(){return n.a.createElement(i.a,{db:l,imports:r.a,hashRouter:!0})};t.a=Object(s.hot)(e)(m),m.__docgenInfo={description:"",methods:[],displayName:"Root"}}).call(this,d("./node_modules/webpack/buildin/harmony-module.js")(e))},0:function(e,t,d){d("./node_modules/@babel/polyfill/lib/index.js"),e.exports=d("./.docz/app/index.jsx")}},[[0,23,0]],[0,2,3,4,5,6,7,8,10,11,9,12,13,16,14,15,17,18,20,21,19,22]]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-focus-on-select.e0518d92.js b/demo/static/js/mdx-focus-on-select.9cbe56ec.js
similarity index 95%
rename from demo/static/js/mdx-focus-on-select.e0518d92.js
rename to demo/static/js/mdx-focus-on-select.9cbe56ec.js
index b6edf80..2b0dbc9 100644
--- a/demo/static/js/mdx-focus-on-select.e0518d92.js
+++ b/demo/static/js/mdx-focus-on-select.9cbe56ec.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{"./src/docs/mdx/focusOnSelect.mdx":function(e,n,t){"use strict";t.r(n);var o=t("./node_modules/react/index.js"),a=t.n(o),c=t("./node_modules/@mdx-js/tag/dist/index.js"),l=t("./node_modules/docz/dist/index.m.js"),r=t("./src/react-elastic-carousel/index.js"),s=t("./src/docs/components/SimpleItem.js");function m(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},c=Object.keys(e);for(o=0;o<c.length;o++)t=c[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)t=c[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}n.default=function(e){var n=e.components,t=m(e,["components"]);return a.a.createElement(c.MDXTag,{name:"wrapper",components:n},a.a.createElement(c.MDXTag,{name:"h1",components:n,props:{id:"focusonselect"}},"focusOnSelect"),a.a.createElement(c.MDXTag,{name:"h4",components:n,props:{id:"sliding-to-an-item-on-click"}},"Sliding to an item on click"),a.a.createElement(l.Playground,{__position:0,__code:"<Carousel focusOnSelect={true} itemsToShow={3}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:t,Carousel:r.b,Item:s.a}},a.a.createElement(r.b,{focusOnSelect:!0,itemsToShow:3},a.a.createElement(s.a,null,"1"),a.a.createElement(s.a,null,"2"),a.a.createElement(s.a,null,"3"),a.a.createElement(s.a,null,"4"),a.a.createElement(s.a,null,"5"),a.a.createElement(s.a,null,"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{"./src/docs/mdx/focusOnSelect.mdx":function(e,n,t){"use strict";t.r(n);var o=t("./node_modules/react/index.js"),a=t.n(o),c=t("./node_modules/@mdx-js/tag/dist/index.js"),l=t("./node_modules/docz/dist/index.m.js"),r=t("./src/react-elastic-carousel/index.js"),s=t("./src/docs/components/SimpleItem.js");function m(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},c=Object.keys(e);for(o=0;o<c.length;o++)t=c[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)t=c[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}n.default=function(e){var n=e.components,t=m(e,["components"]);return a.a.createElement(c.MDXTag,{name:"wrapper",components:n},a.a.createElement(c.MDXTag,{name:"h1",components:n,props:{id:"focusonselect"}},"focusOnSelect"),a.a.createElement(c.MDXTag,{name:"h4",components:n,props:{id:"sliding-to-an-item-on-click"}},"Sliding to an item on click"),a.a.createElement(l.Playground,{__position:0,__code:"<Carousel focusOnSelect={true} itemsToShow={3}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:t,Carousel:r.b,Item:s.a}},a.a.createElement(r.b,{focusOnSelect:!0,itemsToShow:3},a.a.createElement(s.a,null,"1"),a.a.createElement(s.a,null,"2"),a.a.createElement(s.a,null,"3"),a.a.createElement(s.a,null,"4"),a.a.createElement(s.a,null,"5"),a.a.createElement(s.a,null,"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-go-to.2f9e272e.js b/demo/static/js/mdx-go-to.81eac1b1.js
similarity index 97%
rename from demo/static/js/mdx-go-to.2f9e272e.js
rename to demo/static/js/mdx-go-to.81eac1b1.js
index 6125d20..5e72d26 100644
--- a/demo/static/js/mdx-go-to.2f9e272e.js
+++ b/demo/static/js/mdx-go-to.81eac1b1.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{"./src/docs/mdx/goTo.mdx":function(e,n,t){"use strict";t.r(n);var a=t("./node_modules/react/index.js"),o=t.n(a),r=t("./node_modules/@mdx-js/tag/dist/index.js"),l=t("./node_modules/docz/dist/index.m.js"),m=t("./src/react-elastic-carousel/index.js"),c=t("./src/docs/components/SimpleItem.js"),s=void 0;function u(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}n.default=function(e){var n=e.components,t=u(e,["components"]);return o.a.createElement(r.MDXTag,{name:"wrapper",components:n},o.a.createElement(r.MDXTag,{name:"h1",components:n,props:{id:"goto"}},"goTo"),o.a.createElement(r.MDXTag,{name:"h4",components:n,props:{id:"you-can-trigger-the-goto-method-via-a-ref-to-the-carousel"}},"You can trigger the ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"goTo")," method via a ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"ref")," to the ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"Carousel"),":"),o.a.createElement(r.MDXTag,{name:"pre",components:n},o.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"this.carousel.goTo(someIndex)\n")),o.a.createElement(l.Playground,{__position:0,__code:'<label>Go to </label>\n<input\n  type="number"\n  defaultValue={0}\n  onChange={({ target }) => this.carousel.goTo(Number(target.value))}\n/>\n<hr />\n<Carousel ref={ref => (this.carousel = ref)}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>',__scope:{props:t,Carousel:m.b,Item:c.a}},o.a.createElement("label",null,"Go to "),o.a.createElement("input",{type:"number",defaultValue:0,onChange:function(e){var n=e.target;return s.carousel.goTo(Number(n.value))}}),o.a.createElement("hr",null),o.a.createElement(m.b,{ref:function(e){return s.carousel=e}},o.a.createElement(c.a,null,"1"),o.a.createElement(c.a,null,"2"),o.a.createElement(c.a,null,"3"),o.a.createElement(c.a,null,"4"),o.a.createElement(c.a,null,"5"),o.a.createElement(c.a,null,"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{"./src/docs/mdx/goTo.mdx":function(e,n,t){"use strict";t.r(n);var a=t("./node_modules/react/index.js"),o=t.n(a),r=t("./node_modules/@mdx-js/tag/dist/index.js"),l=t("./node_modules/docz/dist/index.m.js"),m=t("./src/react-elastic-carousel/index.js"),c=t("./src/docs/components/SimpleItem.js"),s=void 0;function u(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}n.default=function(e){var n=e.components,t=u(e,["components"]);return o.a.createElement(r.MDXTag,{name:"wrapper",components:n},o.a.createElement(r.MDXTag,{name:"h1",components:n,props:{id:"goto"}},"goTo"),o.a.createElement(r.MDXTag,{name:"h4",components:n,props:{id:"you-can-trigger-the-goto-method-via-a-ref-to-the-carousel"}},"You can trigger the ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"goTo")," method via a ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"ref")," to the ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"Carousel"),":"),o.a.createElement(r.MDXTag,{name:"pre",components:n},o.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"this.carousel.goTo(someIndex)\n")),o.a.createElement(l.Playground,{__position:0,__code:'<label>Go to </label>\n<input\n  type="number"\n  defaultValue={0}\n  onChange={({ target }) => this.carousel.goTo(Number(target.value))}\n/>\n<hr />\n<Carousel ref={ref => (this.carousel = ref)}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>',__scope:{props:t,Carousel:m.b,Item:c.a}},o.a.createElement("label",null,"Go to "),o.a.createElement("input",{type:"number",defaultValue:0,onChange:function(e){var n=e.target;return s.carousel.goTo(Number(n.value))}}),o.a.createElement("hr",null),o.a.createElement(m.b,{ref:function(e){return s.carousel=e}},o.a.createElement(c.a,null,"1"),o.a.createElement(c.a,null,"2"),o.a.createElement(c.a,null,"3"),o.a.createElement(c.a,null,"4"),o.a.createElement(c.a,null,"5"),o.a.createElement(c.a,null,"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-is-rtl.1a8626f6.js b/demo/static/js/mdx-is-rtl.1a8626f6.js
new file mode 100644
index 0000000..6a70f60
--- /dev/null
+++ b/demo/static/js/mdx-is-rtl.1a8626f6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{"./src/docs/mdx/isRTL.mdx":function(e,t,n){"use strict";n.r(t);var o=n("./node_modules/react/index.js"),a=n.n(o),r=n("./node_modules/@mdx-js/tag/dist/index.js"),l=n("./node_modules/docz/dist/index.m.js"),s=n("./src/react-elastic-carousel/index.js"),m=n("./src/docs/components/SimpleItem.js");function c(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}t.default=function(e){var t=e.components,n=c(e,["components"]);return a.a.createElement(r.MDXTag,{name:"wrapper",components:t},a.a.createElement(r.MDXTag,{name:"h1",components:t,props:{id:"isrtl"}},"isRTL"),a.a.createElement(r.MDXTag,{name:"h4",components:t,props:{id:"support-for-right-to-left-layouts"}},"Support for ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"right-to-left")," layouts"),a.a.createElement(l.Playground,{__position:0,__code:"<Carousel isRTL={true} itemsToShow={3}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:n,Carousel:s.b,Item:m.a}},a.a.createElement(s.b,{isRTL:!0,itemsToShow:3},a.a.createElement(m.a,null,"1"),a.a.createElement(m.a,null,"2"),a.a.createElement(m.a,null,"3"),a.a.createElement(m.a,null,"4"),a.a.createElement(m.a,null,"5"),a.a.createElement(m.a,null,"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-is-rtl.f2cf858c.js b/demo/static/js/mdx-is-rtl.f2cf858c.js
deleted file mode 100644
index caa1216..0000000
--- a/demo/static/js/mdx-is-rtl.f2cf858c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{"./src/docs/mdx/isRTL.mdx":function(e,t,n){"use strict";n.r(t);var o=n("./node_modules/react/index.js"),a=n.n(o),r=n("./node_modules/@mdx-js/tag/dist/index.js"),l=n("./node_modules/docz/dist/index.m.js"),s=n("./src/react-elastic-carousel/index.js"),m=n("./src/docs/components/SimpleItem.js");function c(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}t.default=function(e){var t=e.components,n=c(e,["components"]);return a.a.createElement(r.MDXTag,{name:"wrapper",components:t},a.a.createElement(r.MDXTag,{name:"h1",components:t,props:{id:"isrtl"}},"isRTL"),a.a.createElement(r.MDXTag,{name:"h4",components:t,props:{id:"support-for-right-to-left-layouts"}},"Support for ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"right-to-left")," layouts"),a.a.createElement(l.Playground,{__position:0,__code:"<Carousel isRTL={true} itemsToShow={3}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:n,Carousel:s.b,Item:m.a}},a.a.createElement(s.b,{isRTL:!0,itemsToShow:3},a.a.createElement(m.a,null,"1"),a.a.createElement(m.a,null,"2"),a.a.createElement(m.a,null,"3"),a.a.createElement(m.a,null,"4"),a.a.createElement(m.a,null,"5"),a.a.createElement(m.a,null,"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-item-padding.27798ebf.js b/demo/static/js/mdx-item-padding.89a83484.js
similarity index 96%
rename from demo/static/js/mdx-item-padding.27798ebf.js
rename to demo/static/js/mdx-item-padding.89a83484.js
index e9ffea1..092162e 100644
--- a/demo/static/js/mdx-item-padding.27798ebf.js
+++ b/demo/static/js/mdx-item-padding.89a83484.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{"./src/docs/mdx/itemPadding.mdx":function(e,t,n){"use strict";n.r(t);var a=n("./node_modules/react/index.js"),o=n.n(a),m=n("./node_modules/@mdx-js/tag/dist/index.js"),r=n("./node_modules/docz/dist/index.m.js"),l=n("./src/react-elastic-carousel/index.js"),s=n("./src/docs/components/SimpleItem.js");function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},m=Object.keys(e);for(a=0;a<m.length;a++)n=m[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var m=Object.getOwnPropertySymbols(e);for(a=0;a<m.length;a++)n=m[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}t.default=function(e){var t=e.components,n=c(e,["components"]);return o.a.createElement(m.MDXTag,{name:"wrapper",components:t},o.a.createElement(m.MDXTag,{name:"h1",components:t,props:{id:"itempadding"}},"itemPadding"),o.a.createElement(m.MDXTag,{name:"h4",components:t,props:{id:"sets-a-padding-to-the-wrapping-element-of-each-item"}},"Sets a ",o.a.createElement(m.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"padding")," to the wrapping element of each item"),o.a.createElement(r.Playground,{__position:0,__code:"<Carousel itemPadding={[10, 50]} itemsToShow={3}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:n,Carousel:l.b,Item:s.a}},o.a.createElement(l.b,{itemPadding:[10,50],itemsToShow:3},o.a.createElement(s.a,null,"1"),o.a.createElement(s.a,null,"2"),o.a.createElement(s.a,null,"3"),o.a.createElement(s.a,null,"4"),o.a.createElement(s.a,null,"5"),o.a.createElement(s.a,null,"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{"./src/docs/mdx/itemPadding.mdx":function(e,t,n){"use strict";n.r(t);var a=n("./node_modules/react/index.js"),o=n.n(a),m=n("./node_modules/@mdx-js/tag/dist/index.js"),r=n("./node_modules/docz/dist/index.m.js"),l=n("./src/react-elastic-carousel/index.js"),s=n("./src/docs/components/SimpleItem.js");function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},m=Object.keys(e);for(a=0;a<m.length;a++)n=m[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var m=Object.getOwnPropertySymbols(e);for(a=0;a<m.length;a++)n=m[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}t.default=function(e){var t=e.components,n=c(e,["components"]);return o.a.createElement(m.MDXTag,{name:"wrapper",components:t},o.a.createElement(m.MDXTag,{name:"h1",components:t,props:{id:"itempadding"}},"itemPadding"),o.a.createElement(m.MDXTag,{name:"h4",components:t,props:{id:"sets-a-padding-to-the-wrapping-element-of-each-item"}},"Sets a ",o.a.createElement(m.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"padding")," to the wrapping element of each item"),o.a.createElement(r.Playground,{__position:0,__code:"<Carousel itemPadding={[10, 50]} itemsToShow={3}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:n,Carousel:l.b,Item:s.a}},o.a.createElement(l.b,{itemPadding:[10,50],itemsToShow:3},o.a.createElement(s.a,null,"1"),o.a.createElement(s.a,null,"2"),o.a.createElement(s.a,null,"3"),o.a.createElement(s.a,null,"4"),o.a.createElement(s.a,null,"5"),o.a.createElement(s.a,null,"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-item-position.9edf723c.js b/demo/static/js/mdx-item-position.9edf723c.js
new file mode 100644
index 0000000..ce8ebf5
--- /dev/null
+++ b/demo/static/js/mdx-item-position.9edf723c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{"./src/docs/mdx/itemPosition.mdx":function(e,t,n){"use strict";n.r(t);var o=n("./node_modules/react/index.js"),a=n.n(o),m=n("./node_modules/@mdx-js/tag/dist/index.js"),s=n("./node_modules/docz/dist/index.m.js"),r=n("./src/react-elastic-carousel/index.js"),i=n("./src/docs/components/SimpleItem.js");function c(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},m=Object.keys(e);for(o=0;o<m.length;o++)n=m[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var m=Object.getOwnPropertySymbols(e);for(o=0;o<m.length;o++)n=m[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}t.default=function(e){var t=e.components,n=c(e,["components"]);return a.a.createElement(m.MDXTag,{name:"wrapper",components:t},a.a.createElement(m.MDXTag,{name:"h1",components:t,props:{id:"itemposition"}},"itemPosition"),a.a.createElement(m.MDXTag,{name:"h4",components:t,props:{id:"sets-the-position-of-the-item-within-the-items-wrapper"}},"Sets the position of the item within the item's wrapper."),a.a.createElement(m.MDXTag,{name:"p",components:t},a.a.createElement(m.MDXTag,{name:"em",components:t,parentName:"p"},"You should import the ",a.a.createElement(m.MDXTag,{name:"inlineCode",components:t,parentName:"em"},"consts")," object to pass the desired ",a.a.createElement(m.MDXTag,{name:"inlineCode",components:t,parentName:"em"},"itemPosition"))),a.a.createElement(m.MDXTag,{name:"pre",components:t},a.a.createElement(m.MDXTag,{name:"code",components:t,parentName:"pre"},"import Carousel, { consts } from 'react-elastic-carousel';\n")),a.a.createElement(s.Playground,{__position:0,__code:'<Carousel itemPosition={consts.START} itemsToShow={2}>\n  <Item maxWidth="50%">1</Item>\n  <Item maxWidth="50%">3</Item>\n  <Item maxWidth="50%">4</Item>\n  <Item maxWidth="50%">5</Item>\n</Carousel>',__scope:{props:n,Carousel:r.b,consts:r.a,Item:i.a}},a.a.createElement(r.b,{itemPosition:r.a.START,itemsToShow:2},a.a.createElement(i.a,{maxWidth:"50%"},"1"),a.a.createElement(i.a,{maxWidth:"50%"},"3"),a.a.createElement(i.a,{maxWidth:"50%"},"4"),a.a.createElement(i.a,{maxWidth:"50%"},"5"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-item-position.c2529f2f.js b/demo/static/js/mdx-item-position.c2529f2f.js
deleted file mode 100644
index 2e2a55b..0000000
--- a/demo/static/js/mdx-item-position.c2529f2f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{"./src/docs/mdx/itemPosition.mdx":function(e,t,n){"use strict";n.r(t);var o=n("./node_modules/react/index.js"),a=n.n(o),m=n("./node_modules/@mdx-js/tag/dist/index.js"),s=n("./node_modules/docz/dist/index.m.js"),r=n("./src/react-elastic-carousel/index.js"),i=n("./src/docs/components/SimpleItem.js");function c(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},m=Object.keys(e);for(o=0;o<m.length;o++)n=m[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var m=Object.getOwnPropertySymbols(e);for(o=0;o<m.length;o++)n=m[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}t.default=function(e){var t=e.components,n=c(e,["components"]);return a.a.createElement(m.MDXTag,{name:"wrapper",components:t},a.a.createElement(m.MDXTag,{name:"h1",components:t,props:{id:"itemposition"}},"itemPosition"),a.a.createElement(m.MDXTag,{name:"h4",components:t,props:{id:"sets-the-position-of-the-item-within-the-items-wrapper"}},"Sets the position of the item within the item's wrapper."),a.a.createElement(m.MDXTag,{name:"p",components:t},a.a.createElement(m.MDXTag,{name:"em",components:t,parentName:"p"},"You should import the ",a.a.createElement(m.MDXTag,{name:"inlineCode",components:t,parentName:"em"},"consts")," object to pass the desired ",a.a.createElement(m.MDXTag,{name:"inlineCode",components:t,parentName:"em"},"itemPosition"))),a.a.createElement(m.MDXTag,{name:"pre",components:t},a.a.createElement(m.MDXTag,{name:"code",components:t,parentName:"pre"},"import Carousel, { consts } from 'react-elastic-carousel';\n")),a.a.createElement(s.Playground,{__position:0,__code:'<Carousel itemPosition={consts.START} itemsToShow={2}>\n  <Item maxWidth="50%">1</Item>\n  <Item maxWidth="50%">3</Item>\n  <Item maxWidth="50%">4</Item>\n  <Item maxWidth="50%">5</Item>\n</Carousel>',__scope:{props:n,Carousel:r.b,consts:r.a,Item:i.a}},a.a.createElement(r.b,{itemPosition:r.a.START,itemsToShow:2},a.a.createElement(i.a,{maxWidth:"50%"},"1"),a.a.createElement(i.a,{maxWidth:"50%"},"3"),a.a.createElement(i.a,{maxWidth:"50%"},"4"),a.a.createElement(i.a,{maxWidth:"50%"},"5"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-on-next-end.c03dd7e6.js b/demo/static/js/mdx-on-next-end.3e5221f4.js
similarity index 97%
rename from demo/static/js/mdx-on-next-end.c03dd7e6.js
rename to demo/static/js/mdx-on-next-end.3e5221f4.js
index 5aa8690..0ed5e6b 100644
--- a/demo/static/js/mdx-on-next-end.c03dd7e6.js
+++ b/demo/static/js/mdx-on-next-end.3e5221f4.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{"./src/docs/mdx/onNextEnd.mdx":function(e,n,t){"use strict";t.r(n);var o=t("./node_modules/react/index.js"),a=t.n(o),m=t("./node_modules/@mdx-js/tag/dist/index.js"),r=t("./node_modules/docz/dist/index.m.js"),c=t("./src/react-elastic-carousel/index.js"),s=t("./src/docs/components/SimpleItem.js");function l(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},m=Object.keys(e);for(o=0;o<m.length;o++)t=m[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var m=Object.getOwnPropertySymbols(e);for(o=0;o<m.length;o++)t=m[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}n.default=function(e){var n=e.components,t=l(e,["components"]);return a.a.createElement(m.MDXTag,{name:"wrapper",components:n},a.a.createElement(m.MDXTag,{name:"h1",components:n,props:{id:"onnextend"}},"onNextEnd"),a.a.createElement(m.MDXTag,{name:"h4",components:n,props:{id:"onnextend-will-pass-the-new-current-item-object"}},a.a.createElement(m.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"onNextEnd")," will pass the new ",a.a.createElement(m.MDXTag,{name:"strong",components:n,parentName:"h4"},"current")," ",a.a.createElement(m.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"item-object"),":"),a.a.createElement(m.MDXTag,{name:"pre",components:n},a.a.createElement(m.MDXTag,{name:"code",components:n,parentName:"pre"},"(currentItem) => {/*...*/}\n")),a.a.createElement(m.MDXTag,{name:"ul",components:n},a.a.createElement(m.MDXTag,{name:"li",components:n,parentName:"ul"},"The ",a.a.createElement(m.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"item-object")," has the shape of:")),a.a.createElement(m.MDXTag,{name:"pre",components:n},a.a.createElement(m.MDXTag,{name:"code",components:n,parentName:"pre"},"{\n    item: {/* your item */},\n    index: // the item's index number \n}\n")),a.a.createElement(r.Playground,{__position:0,__code:'<Carousel\n  itemsToShow={2}\n  onNextEnd={currentItem => alert(JSON.stringify(currentItem))}\n>\n  <Item someProp="cool1">1</Item>\n  <Item someProp="cool2">2</Item>\n  <Item someProp="cool3">3</Item>\n  <Item someProp="cool4">4</Item>\n  <Item someProp="cool5">5</Item>\n  <Item someProp="cool6">6</Item>\n</Carousel>',__scope:{props:t,Carousel:c.b,Item:s.a}},a.a.createElement(c.b,{itemsToShow:2,onNextEnd:function(e){return alert(JSON.stringify(e))}},a.a.createElement(s.a,{someProp:"cool1"},"1"),a.a.createElement(s.a,{someProp:"cool2"},"2"),a.a.createElement(s.a,{someProp:"cool3"},"3"),a.a.createElement(s.a,{someProp:"cool4"},"4"),a.a.createElement(s.a,{someProp:"cool5"},"5"),a.a.createElement(s.a,{someProp:"cool6"},"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{"./src/docs/mdx/onNextEnd.mdx":function(e,n,t){"use strict";t.r(n);var o=t("./node_modules/react/index.js"),a=t.n(o),m=t("./node_modules/@mdx-js/tag/dist/index.js"),r=t("./node_modules/docz/dist/index.m.js"),c=t("./src/react-elastic-carousel/index.js"),s=t("./src/docs/components/SimpleItem.js");function l(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},m=Object.keys(e);for(o=0;o<m.length;o++)t=m[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var m=Object.getOwnPropertySymbols(e);for(o=0;o<m.length;o++)t=m[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}n.default=function(e){var n=e.components,t=l(e,["components"]);return a.a.createElement(m.MDXTag,{name:"wrapper",components:n},a.a.createElement(m.MDXTag,{name:"h1",components:n,props:{id:"onnextend"}},"onNextEnd"),a.a.createElement(m.MDXTag,{name:"h4",components:n,props:{id:"onnextend-will-pass-the-new-current-item-object"}},a.a.createElement(m.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"onNextEnd")," will pass the new ",a.a.createElement(m.MDXTag,{name:"strong",components:n,parentName:"h4"},"current")," ",a.a.createElement(m.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"item-object"),":"),a.a.createElement(m.MDXTag,{name:"pre",components:n},a.a.createElement(m.MDXTag,{name:"code",components:n,parentName:"pre"},"(currentItem) => {/*...*/}\n")),a.a.createElement(m.MDXTag,{name:"ul",components:n},a.a.createElement(m.MDXTag,{name:"li",components:n,parentName:"ul"},"The ",a.a.createElement(m.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"item-object")," has the shape of:")),a.a.createElement(m.MDXTag,{name:"pre",components:n},a.a.createElement(m.MDXTag,{name:"code",components:n,parentName:"pre"},"{\n    item: {/* your item */},\n    index: // the item's index number \n}\n")),a.a.createElement(r.Playground,{__position:0,__code:'<Carousel\n  itemsToShow={2}\n  onNextEnd={currentItem => alert(JSON.stringify(currentItem))}\n>\n  <Item someProp="cool1">1</Item>\n  <Item someProp="cool2">2</Item>\n  <Item someProp="cool3">3</Item>\n  <Item someProp="cool4">4</Item>\n  <Item someProp="cool5">5</Item>\n  <Item someProp="cool6">6</Item>\n</Carousel>',__scope:{props:t,Carousel:c.b,Item:s.a}},a.a.createElement(c.b,{itemsToShow:2,onNextEnd:function(e){return alert(JSON.stringify(e))}},a.a.createElement(s.a,{someProp:"cool1"},"1"),a.a.createElement(s.a,{someProp:"cool2"},"2"),a.a.createElement(s.a,{someProp:"cool3"},"3"),a.a.createElement(s.a,{someProp:"cool4"},"4"),a.a.createElement(s.a,{someProp:"cool5"},"5"),a.a.createElement(s.a,{someProp:"cool6"},"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-on-next-start.b408cffe.js b/demo/static/js/mdx-on-next-start.e2ca4a95.js
similarity index 97%
rename from demo/static/js/mdx-on-next-start.b408cffe.js
rename to demo/static/js/mdx-on-next-start.e2ca4a95.js
index 98a55d3..2e04ecc 100644
--- a/demo/static/js/mdx-on-next-start.b408cffe.js
+++ b/demo/static/js/mdx-on-next-start.e2ca4a95.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{"./src/docs/mdx/onNextStart.mdx":function(e,t,n){"use strict";n.r(t);var o=n("./node_modules/react/index.js"),a=n.n(o),r=n("./node_modules/@mdx-js/tag/dist/index.js"),m=n("./node_modules/docz/dist/index.m.js"),c=n("./src/react-elastic-carousel/index.js"),s=n("./src/docs/components/SimpleItem.js");function l(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}t.default=function(e){var t=e.components,n=l(e,["components"]);return a.a.createElement(r.MDXTag,{name:"wrapper",components:t},a.a.createElement(r.MDXTag,{name:"h1",components:t,props:{id:"onnextstart"}},"onNextStart"),a.a.createElement(r.MDXTag,{name:"h4",components:t,props:{id:"onnextstart-will-pass-both-the-current-and-next-item-object"}},a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"onNextStart")," will pass both the ",a.a.createElement(r.MDXTag,{name:"strong",components:t,parentName:"h4"},"current")," and ",a.a.createElement(r.MDXTag,{name:"strong",components:t,parentName:"h4"},"next")," ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"item-object"),":"),a.a.createElement(r.MDXTag,{name:"pre",components:t},a.a.createElement(r.MDXTag,{name:"code",components:t,parentName:"pre"},"(currentItem, nextItem) => {/*...*/}\n")),a.a.createElement(r.MDXTag,{name:"ul",components:t},a.a.createElement(r.MDXTag,{name:"li",components:t,parentName:"ul"},"The ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"li"},"item-object")," has the shape of:")),a.a.createElement(r.MDXTag,{name:"pre",components:t},a.a.createElement(r.MDXTag,{name:"code",components:t,parentName:"pre"},"{\n    item: {/* your item */},\n    index: // the item's index number \n}\n")),a.a.createElement(m.Playground,{__position:0,__code:'<Carousel\n  itemsToShow={2}\n  onNextStart={(currentItem, nextItem) =>\n    alert(JSON.stringify(currentItem) + `\n` + JSON.stringify(nextItem))\n  }\n>\n  <Item someProp="cool1">1</Item>\n  <Item someProp="cool2">2</Item>\n  <Item someProp="cool3">3</Item>\n  <Item someProp="cool4">4</Item>\n  <Item someProp="cool5">5</Item>\n  <Item someProp="cool6">6</Item>\n</Carousel>',__scope:{props:n,Carousel:c.b,Item:s.a}},a.a.createElement(c.b,{itemsToShow:2,onNextStart:function(e,t){return alert(JSON.stringify(e)+"\n"+JSON.stringify(t))}},a.a.createElement(s.a,{someProp:"cool1"},"1"),a.a.createElement(s.a,{someProp:"cool2"},"2"),a.a.createElement(s.a,{someProp:"cool3"},"3"),a.a.createElement(s.a,{someProp:"cool4"},"4"),a.a.createElement(s.a,{someProp:"cool5"},"5"),a.a.createElement(s.a,{someProp:"cool6"},"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{"./src/docs/mdx/onNextStart.mdx":function(e,t,n){"use strict";n.r(t);var o=n("./node_modules/react/index.js"),a=n.n(o),r=n("./node_modules/@mdx-js/tag/dist/index.js"),m=n("./node_modules/docz/dist/index.m.js"),c=n("./src/react-elastic-carousel/index.js"),s=n("./src/docs/components/SimpleItem.js");function l(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}t.default=function(e){var t=e.components,n=l(e,["components"]);return a.a.createElement(r.MDXTag,{name:"wrapper",components:t},a.a.createElement(r.MDXTag,{name:"h1",components:t,props:{id:"onnextstart"}},"onNextStart"),a.a.createElement(r.MDXTag,{name:"h4",components:t,props:{id:"onnextstart-will-pass-both-the-current-and-next-item-object"}},a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"onNextStart")," will pass both the ",a.a.createElement(r.MDXTag,{name:"strong",components:t,parentName:"h4"},"current")," and ",a.a.createElement(r.MDXTag,{name:"strong",components:t,parentName:"h4"},"next")," ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"item-object"),":"),a.a.createElement(r.MDXTag,{name:"pre",components:t},a.a.createElement(r.MDXTag,{name:"code",components:t,parentName:"pre"},"(currentItem, nextItem) => {/*...*/}\n")),a.a.createElement(r.MDXTag,{name:"ul",components:t},a.a.createElement(r.MDXTag,{name:"li",components:t,parentName:"ul"},"The ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"li"},"item-object")," has the shape of:")),a.a.createElement(r.MDXTag,{name:"pre",components:t},a.a.createElement(r.MDXTag,{name:"code",components:t,parentName:"pre"},"{\n    item: {/* your item */},\n    index: // the item's index number \n}\n")),a.a.createElement(m.Playground,{__position:0,__code:'<Carousel\n  itemsToShow={2}\n  onNextStart={(currentItem, nextItem) =>\n    alert(JSON.stringify(currentItem) + `\n` + JSON.stringify(nextItem))\n  }\n>\n  <Item someProp="cool1">1</Item>\n  <Item someProp="cool2">2</Item>\n  <Item someProp="cool3">3</Item>\n  <Item someProp="cool4">4</Item>\n  <Item someProp="cool5">5</Item>\n  <Item someProp="cool6">6</Item>\n</Carousel>',__scope:{props:n,Carousel:c.b,Item:s.a}},a.a.createElement(c.b,{itemsToShow:2,onNextStart:function(e,t){return alert(JSON.stringify(e)+"\n"+JSON.stringify(t))}},a.a.createElement(s.a,{someProp:"cool1"},"1"),a.a.createElement(s.a,{someProp:"cool2"},"2"),a.a.createElement(s.a,{someProp:"cool3"},"3"),a.a.createElement(s.a,{someProp:"cool4"},"4"),a.a.createElement(s.a,{someProp:"cool5"},"5"),a.a.createElement(s.a,{someProp:"cool6"},"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-on-prev-end.0291ea17.js b/demo/static/js/mdx-on-prev-end.891bfaaf.js
similarity index 97%
rename from demo/static/js/mdx-on-prev-end.0291ea17.js
rename to demo/static/js/mdx-on-prev-end.891bfaaf.js
index 5aad1eb..6433806 100644
--- a/demo/static/js/mdx-on-prev-end.0291ea17.js
+++ b/demo/static/js/mdx-on-prev-end.891bfaaf.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{"./src/docs/mdx/onPrevEnd.mdx":function(e,n,t){"use strict";t.r(n);var o=t("./node_modules/react/index.js"),a=t.n(o),r=t("./node_modules/@mdx-js/tag/dist/index.js"),m=t("./node_modules/docz/dist/index.m.js"),c=t("./src/react-elastic-carousel/index.js"),s=t("./src/docs/components/SimpleItem.js");function l(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}n.default=function(e){var n=e.components,t=l(e,["components"]);return a.a.createElement(r.MDXTag,{name:"wrapper",components:n},a.a.createElement(r.MDXTag,{name:"h1",components:n,props:{id:"onprevend"}},"onPrevEnd"),a.a.createElement(r.MDXTag,{name:"h4",components:n,props:{id:"onprevend-will-pass-the-new-current-item-object"}},a.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"onPrevEnd")," will pass the new ",a.a.createElement(r.MDXTag,{name:"strong",components:n,parentName:"h4"},"current")," ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"item-object"),":"),a.a.createElement(r.MDXTag,{name:"pre",components:n},a.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"(currentItem) => {/*...*/}\n")),a.a.createElement(r.MDXTag,{name:"ul",components:n},a.a.createElement(r.MDXTag,{name:"li",components:n,parentName:"ul"},"The ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"item-object")," has the shape of:")),a.a.createElement(r.MDXTag,{name:"pre",components:n},a.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"{\n    item: {/* your item */},\n    index: // the item's index number \n}\n")),a.a.createElement(m.Playground,{__position:0,__code:'<Carousel\n  initialFirstItem={3}\n  itemsToShow={2}\n  onPrevEnd={currentItem => alert(JSON.stringify(currentItem))}\n>\n  <Item someProp="cool1">1</Item>\n  <Item someProp="cool2">2</Item>\n  <Item someProp="cool3">3</Item>\n  <Item someProp="cool4">4</Item>\n  <Item someProp="cool5">5</Item>\n  <Item someProp="cool6">6</Item>\n</Carousel>',__scope:{props:t,Carousel:c.b,Item:s.a}},a.a.createElement(c.b,{initialFirstItem:3,itemsToShow:2,onPrevEnd:function(e){return alert(JSON.stringify(e))}},a.a.createElement(s.a,{someProp:"cool1"},"1"),a.a.createElement(s.a,{someProp:"cool2"},"2"),a.a.createElement(s.a,{someProp:"cool3"},"3"),a.a.createElement(s.a,{someProp:"cool4"},"4"),a.a.createElement(s.a,{someProp:"cool5"},"5"),a.a.createElement(s.a,{someProp:"cool6"},"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{"./src/docs/mdx/onPrevEnd.mdx":function(e,n,t){"use strict";t.r(n);var o=t("./node_modules/react/index.js"),a=t.n(o),r=t("./node_modules/@mdx-js/tag/dist/index.js"),m=t("./node_modules/docz/dist/index.m.js"),c=t("./src/react-elastic-carousel/index.js"),s=t("./src/docs/components/SimpleItem.js");function l(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}n.default=function(e){var n=e.components,t=l(e,["components"]);return a.a.createElement(r.MDXTag,{name:"wrapper",components:n},a.a.createElement(r.MDXTag,{name:"h1",components:n,props:{id:"onprevend"}},"onPrevEnd"),a.a.createElement(r.MDXTag,{name:"h4",components:n,props:{id:"onprevend-will-pass-the-new-current-item-object"}},a.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"onPrevEnd")," will pass the new ",a.a.createElement(r.MDXTag,{name:"strong",components:n,parentName:"h4"},"current")," ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"h4"},"item-object"),":"),a.a.createElement(r.MDXTag,{name:"pre",components:n},a.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"(currentItem) => {/*...*/}\n")),a.a.createElement(r.MDXTag,{name:"ul",components:n},a.a.createElement(r.MDXTag,{name:"li",components:n,parentName:"ul"},"The ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"item-object")," has the shape of:")),a.a.createElement(r.MDXTag,{name:"pre",components:n},a.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"{\n    item: {/* your item */},\n    index: // the item's index number \n}\n")),a.a.createElement(m.Playground,{__position:0,__code:'<Carousel\n  initialFirstItem={3}\n  itemsToShow={2}\n  onPrevEnd={currentItem => alert(JSON.stringify(currentItem))}\n>\n  <Item someProp="cool1">1</Item>\n  <Item someProp="cool2">2</Item>\n  <Item someProp="cool3">3</Item>\n  <Item someProp="cool4">4</Item>\n  <Item someProp="cool5">5</Item>\n  <Item someProp="cool6">6</Item>\n</Carousel>',__scope:{props:t,Carousel:c.b,Item:s.a}},a.a.createElement(c.b,{initialFirstItem:3,itemsToShow:2,onPrevEnd:function(e){return alert(JSON.stringify(e))}},a.a.createElement(s.a,{someProp:"cool1"},"1"),a.a.createElement(s.a,{someProp:"cool2"},"2"),a.a.createElement(s.a,{someProp:"cool3"},"3"),a.a.createElement(s.a,{someProp:"cool4"},"4"),a.a.createElement(s.a,{someProp:"cool5"},"5"),a.a.createElement(s.a,{someProp:"cool6"},"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-on-prev-start.4b5257a3.js b/demo/static/js/mdx-on-prev-start.0e294702.js
similarity index 97%
rename from demo/static/js/mdx-on-prev-start.4b5257a3.js
rename to demo/static/js/mdx-on-prev-start.0e294702.js
index fd5e6d5..7ad642b 100644
--- a/demo/static/js/mdx-on-prev-start.4b5257a3.js
+++ b/demo/static/js/mdx-on-prev-start.0e294702.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{"./src/docs/mdx/onPrevStart.mdx":function(e,t,n){"use strict";n.r(t);var o=n("./node_modules/react/index.js"),a=n.n(o),r=n("./node_modules/@mdx-js/tag/dist/index.js"),m=n("./node_modules/docz/dist/index.m.js"),c=n("./src/react-elastic-carousel/index.js"),s=n("./src/docs/components/SimpleItem.js");function l(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}t.default=function(e){var t=e.components,n=l(e,["components"]);return a.a.createElement(r.MDXTag,{name:"wrapper",components:t},a.a.createElement(r.MDXTag,{name:"h1",components:t,props:{id:"onprevstart"}},"onPrevStart"),a.a.createElement(r.MDXTag,{name:"h4",components:t,props:{id:"onprevstart-will-pass-both-the-current-and-next-item-object"}},a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"onPrevStart")," will pass both the ",a.a.createElement(r.MDXTag,{name:"strong",components:t,parentName:"h4"},"current")," and ",a.a.createElement(r.MDXTag,{name:"strong",components:t,parentName:"h4"},"next")," ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"item-object"),":"),a.a.createElement(r.MDXTag,{name:"pre",components:t},a.a.createElement(r.MDXTag,{name:"code",components:t,parentName:"pre"},"(currentItem, nextItem) => {/*...*/}\n")),a.a.createElement(r.MDXTag,{name:"ul",components:t},a.a.createElement(r.MDXTag,{name:"li",components:t,parentName:"ul"},"The ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"li"},"item-object")," has the shape of:")),a.a.createElement(r.MDXTag,{name:"pre",components:t},a.a.createElement(r.MDXTag,{name:"code",components:t,parentName:"pre"},"{\n    item: {/* your item */},\n    index: // the item's index number \n}\n")),a.a.createElement(m.Playground,{__position:0,__code:'<Carousel\n  initialFirstItem={3}\n  itemsToShow={2}\n  onPrevStart={(currentItem, nextItem) =>\n    alert(JSON.stringify(currentItem) + `\n` + JSON.stringify(nextItem))\n  }\n>\n  <Item someProp="cool1">1</Item>\n  <Item someProp="cool2">2</Item>\n  <Item someProp="cool3">3</Item>\n  <Item someProp="cool4">4</Item>\n  <Item someProp="cool5">5</Item>\n  <Item someProp="cool6">6</Item>\n</Carousel>',__scope:{props:n,Carousel:c.b,Item:s.a}},a.a.createElement(c.b,{initialFirstItem:3,itemsToShow:2,onPrevStart:function(e,t){return alert(JSON.stringify(e)+"\n"+JSON.stringify(t))}},a.a.createElement(s.a,{someProp:"cool1"},"1"),a.a.createElement(s.a,{someProp:"cool2"},"2"),a.a.createElement(s.a,{someProp:"cool3"},"3"),a.a.createElement(s.a,{someProp:"cool4"},"4"),a.a.createElement(s.a,{someProp:"cool5"},"5"),a.a.createElement(s.a,{someProp:"cool6"},"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{"./src/docs/mdx/onPrevStart.mdx":function(e,t,n){"use strict";n.r(t);var o=n("./node_modules/react/index.js"),a=n.n(o),r=n("./node_modules/@mdx-js/tag/dist/index.js"),m=n("./node_modules/docz/dist/index.m.js"),c=n("./src/react-elastic-carousel/index.js"),s=n("./src/docs/components/SimpleItem.js");function l(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}t.default=function(e){var t=e.components,n=l(e,["components"]);return a.a.createElement(r.MDXTag,{name:"wrapper",components:t},a.a.createElement(r.MDXTag,{name:"h1",components:t,props:{id:"onprevstart"}},"onPrevStart"),a.a.createElement(r.MDXTag,{name:"h4",components:t,props:{id:"onprevstart-will-pass-both-the-current-and-next-item-object"}},a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"onPrevStart")," will pass both the ",a.a.createElement(r.MDXTag,{name:"strong",components:t,parentName:"h4"},"current")," and ",a.a.createElement(r.MDXTag,{name:"strong",components:t,parentName:"h4"},"next")," ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"item-object"),":"),a.a.createElement(r.MDXTag,{name:"pre",components:t},a.a.createElement(r.MDXTag,{name:"code",components:t,parentName:"pre"},"(currentItem, nextItem) => {/*...*/}\n")),a.a.createElement(r.MDXTag,{name:"ul",components:t},a.a.createElement(r.MDXTag,{name:"li",components:t,parentName:"ul"},"The ",a.a.createElement(r.MDXTag,{name:"inlineCode",components:t,parentName:"li"},"item-object")," has the shape of:")),a.a.createElement(r.MDXTag,{name:"pre",components:t},a.a.createElement(r.MDXTag,{name:"code",components:t,parentName:"pre"},"{\n    item: {/* your item */},\n    index: // the item's index number \n}\n")),a.a.createElement(m.Playground,{__position:0,__code:'<Carousel\n  initialFirstItem={3}\n  itemsToShow={2}\n  onPrevStart={(currentItem, nextItem) =>\n    alert(JSON.stringify(currentItem) + `\n` + JSON.stringify(nextItem))\n  }\n>\n  <Item someProp="cool1">1</Item>\n  <Item someProp="cool2">2</Item>\n  <Item someProp="cool3">3</Item>\n  <Item someProp="cool4">4</Item>\n  <Item someProp="cool5">5</Item>\n  <Item someProp="cool6">6</Item>\n</Carousel>',__scope:{props:n,Carousel:c.b,Item:s.a}},a.a.createElement(c.b,{initialFirstItem:3,itemsToShow:2,onPrevStart:function(e,t){return alert(JSON.stringify(e)+"\n"+JSON.stringify(t))}},a.a.createElement(s.a,{someProp:"cool1"},"1"),a.a.createElement(s.a,{someProp:"cool2"},"2"),a.a.createElement(s.a,{someProp:"cool3"},"3"),a.a.createElement(s.a,{someProp:"cool4"},"4"),a.a.createElement(s.a,{someProp:"cool5"},"5"),a.a.createElement(s.a,{someProp:"cool6"},"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-render-arrow.a1c5a675.js b/demo/static/js/mdx-render-arrow.c08208c7.js
similarity index 98%
rename from demo/static/js/mdx-render-arrow.a1c5a675.js
rename to demo/static/js/mdx-render-arrow.c08208c7.js
index 1a73c87..385b78b 100644
--- a/demo/static/js/mdx-render-arrow.a1c5a675.js
+++ b/demo/static/js/mdx-render-arrow.c08208c7.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{"./src/docs/mdx/renderArrow.mdx":function(e,n,t){"use strict";t.r(n);var a=t("./node_modules/react/index.js"),o=t.n(a),r=t("./node_modules/@mdx-js/tag/dist/index.js"),m=t("./node_modules/docz/dist/index.m.js"),c=t("./src/react-elastic-carousel/index.js");function s(){var e=function(e,n){n||(n=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}(["\n  font-size: 2.5em;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"]);return s=function(){return e},e}var l=t("./node_modules/styled-components/dist/styled-components.browser.esm.js").a.div(s()),p=t("./src/docs/components/SimpleItem.js");function i(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}n.default=function(e){var n=e.components,t=i(e,["components"]);return o.a.createElement(r.MDXTag,{name:"wrapper",components:n},o.a.createElement(r.MDXTag,{name:"h1",components:n,props:{id:"renderarrow"}},"renderArrow"),o.a.createElement(r.MDXTag,{name:"h3",components:n,props:{id:"you-can-provide-custom-arrow-buttons"}},"You can provide custom Arrow buttons."),o.a.createElement(r.MDXTag,{name:"h2",components:n,props:{id:"signature"}},"Signature"),o.a.createElement(r.MDXTag,{name:"ul",components:n},o.a.createElement(r.MDXTag,{name:"li",components:n,parentName:"ul"},"You can pass a function that returns a react element,",o.a.createElement(r.MDXTag,{name:"br",components:n,parentName:"li"}),"This function is a ",o.a.createElement(r.MDXTag,{name:"a",components:n,parentName:"li",props:{href:"https://reactjs.org/docs/render-props.html"}},"render prop")," and its signature is:  ")),o.a.createElement(r.MDXTag,{name:"pre",components:n},o.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"({type, onClick}) => {/* return your element here */}\n")),o.a.createElement(r.MDXTag,{name:"ul",components:n},o.a.createElement(r.MDXTag,{name:"li",components:n,parentName:"ul"},o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"type")," = ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"PropTypes.oneOf([consts.PREV, consts.NEXT])")),o.a.createElement(r.MDXTag,{name:"li",components:n,parentName:"ul"},o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"onClick")," Is the hook to the inner ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"onClick")," of the ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"Carousel"),". You can attach it wherever you want within the returned component.")),o.a.createElement(r.MDXTag,{name:"p",components:n},o.a.createElement(r.MDXTag,{name:"em",components:n,parentName:"p"},"You should import the ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"em"},"consts")," object to check the arrow direction")),o.a.createElement(r.MDXTag,{name:"pre",components:n},o.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"import Carousel, { consts } from 'react-elastic-carousel';\n // ....\n\ntype === consts.PREV\n")),o.a.createElement(r.MDXTag,{name:"h2",components:n,props:{id:"demo"}},"Demo"),o.a.createElement(m.Playground,{__position:0,__code:"<Carousel\n  renderArrow={({ type, onClick }) => {\n    const pointer = type === consts.PREV ? '\ud83d\udc48' : '\ud83d\udc49'\n    return <Button onClick={onClick}>{pointer}</Button>\n  }}\n>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:t,Carousel:c.b,consts:c.a,Button:l,Item:p.a}},o.a.createElement(c.b,{renderArrow:function(e){var n=e.type,t=e.onClick,a=n===c.a.PREV?"\ud83d\udc48":"\ud83d\udc49";return o.a.createElement(l,{onClick:t},a)}},o.a.createElement(p.a,null,"1"),o.a.createElement(p.a,null,"2"),o.a.createElement(p.a,null,"3"),o.a.createElement(p.a,null,"4"),o.a.createElement(p.a,null,"5"),o.a.createElement(p.a,null,"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{"./src/docs/mdx/renderArrow.mdx":function(e,n,t){"use strict";t.r(n);var a=t("./node_modules/react/index.js"),o=t.n(a),r=t("./node_modules/@mdx-js/tag/dist/index.js"),m=t("./node_modules/docz/dist/index.m.js"),c=t("./src/react-elastic-carousel/index.js");function s(){var e=function(e,n){n||(n=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}(["\n  font-size: 2.5em;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"]);return s=function(){return e},e}var l=t("./node_modules/styled-components/dist/styled-components.browser.esm.js").a.div(s()),p=t("./src/docs/components/SimpleItem.js");function i(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}n.default=function(e){var n=e.components,t=i(e,["components"]);return o.a.createElement(r.MDXTag,{name:"wrapper",components:n},o.a.createElement(r.MDXTag,{name:"h1",components:n,props:{id:"renderarrow"}},"renderArrow"),o.a.createElement(r.MDXTag,{name:"h3",components:n,props:{id:"you-can-provide-custom-arrow-buttons"}},"You can provide custom Arrow buttons."),o.a.createElement(r.MDXTag,{name:"h2",components:n,props:{id:"signature"}},"Signature"),o.a.createElement(r.MDXTag,{name:"ul",components:n},o.a.createElement(r.MDXTag,{name:"li",components:n,parentName:"ul"},"You can pass a function that returns a react element,",o.a.createElement(r.MDXTag,{name:"br",components:n,parentName:"li"}),"This function is a ",o.a.createElement(r.MDXTag,{name:"a",components:n,parentName:"li",props:{href:"https://reactjs.org/docs/render-props.html"}},"render prop")," and its signature is:  ")),o.a.createElement(r.MDXTag,{name:"pre",components:n},o.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"({type, onClick}) => {/* return your element here */}\n")),o.a.createElement(r.MDXTag,{name:"ul",components:n},o.a.createElement(r.MDXTag,{name:"li",components:n,parentName:"ul"},o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"type")," = ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"PropTypes.oneOf([consts.PREV, consts.NEXT])")),o.a.createElement(r.MDXTag,{name:"li",components:n,parentName:"ul"},o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"onClick")," Is the hook to the inner ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"onClick")," of the ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"li"},"Carousel"),". You can attach it wherever you want within the returned component.")),o.a.createElement(r.MDXTag,{name:"p",components:n},o.a.createElement(r.MDXTag,{name:"em",components:n,parentName:"p"},"You should import the ",o.a.createElement(r.MDXTag,{name:"inlineCode",components:n,parentName:"em"},"consts")," object to check the arrow direction")),o.a.createElement(r.MDXTag,{name:"pre",components:n},o.a.createElement(r.MDXTag,{name:"code",components:n,parentName:"pre"},"import Carousel, { consts } from 'react-elastic-carousel';\n // ....\n\ntype === consts.PREV\n")),o.a.createElement(r.MDXTag,{name:"h2",components:n,props:{id:"demo"}},"Demo"),o.a.createElement(m.Playground,{__position:0,__code:"<Carousel\n  renderArrow={({ type, onClick }) => {\n    const pointer = type === consts.PREV ? '\ud83d\udc48' : '\ud83d\udc49'\n    return <Button onClick={onClick}>{pointer}</Button>\n  }}\n>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:t,Carousel:c.b,consts:c.a,Button:l,Item:p.a}},o.a.createElement(c.b,{renderArrow:function(e){var n=e.type,t=e.onClick,a=n===c.a.PREV?"\ud83d\udc48":"\ud83d\udc49";return o.a.createElement(l,{onClick:t},a)}},o.a.createElement(p.a,null,"1"),o.a.createElement(p.a,null,"2"),o.a.createElement(p.a,null,"3"),o.a.createElement(p.a,null,"4"),o.a.createElement(p.a,null,"5"),o.a.createElement(p.a,null,"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-slide-next.1fdb5e4a.js b/demo/static/js/mdx-slide-next.635d605f.js
similarity index 97%
rename from demo/static/js/mdx-slide-next.1fdb5e4a.js
rename to demo/static/js/mdx-slide-next.635d605f.js
index 69ecc8b..6b88862 100644
--- a/demo/static/js/mdx-slide-next.1fdb5e4a.js
+++ b/demo/static/js/mdx-slide-next.635d605f.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{"./src/docs/mdx/slideNext.mdx":function(e,t,n){"use strict";n.r(t);var a=n("./node_modules/react/index.js"),r=n.n(a),o=n("./node_modules/@mdx-js/tag/dist/index.js"),l=n("./node_modules/docz/dist/index.m.js"),s=n("./src/react-elastic-carousel/index.js"),c=n("./src/docs/components/SimpleItem.js"),m=void 0;function i(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}t.default=function(e){var t=e.components,n=i(e,["components"]);return r.a.createElement(o.MDXTag,{name:"wrapper",components:t},r.a.createElement(o.MDXTag,{name:"h1",components:t,props:{id:"slidenext--slideprev"}},"slideNext / slidePrev"),r.a.createElement(o.MDXTag,{name:"h4",components:t,props:{id:"you-can-trigger-the-slidenext-or-slideprev-methods-via-a-ref-to-the-carousel"}},"You can trigger the ",r.a.createElement(o.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"slideNext")," or ",r.a.createElement(o.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"slidePrev")," methods via a ",r.a.createElement(o.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"ref")," to the ",r.a.createElement(o.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"Carousel"),":"),r.a.createElement(o.MDXTag,{name:"pre",components:t},r.a.createElement(o.MDXTag,{name:"code",components:t,parentName:"pre"},"this.carousel.slideNext()\nthis.carousel.slidePrev()\n")),r.a.createElement(l.Playground,{__position:0,__code:"<button onClick={() => this.carousel.slidePrev()}>Prev</button>\n<button onClick={() => this.carousel.slideNext()}>Next</button>\n<hr />\n<Carousel ref={ref => (this.carousel = ref)}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:n,Carousel:s.b,Item:c.a}},r.a.createElement("button",{onClick:function(){return m.carousel.slidePrev()}},"Prev"),r.a.createElement("button",{onClick:function(){return m.carousel.slideNext()}},"Next"),r.a.createElement("hr",null),r.a.createElement(s.b,{ref:function(e){return m.carousel=e}},r.a.createElement(c.a,null,"1"),r.a.createElement(c.a,null,"2"),r.a.createElement(c.a,null,"3"),r.a.createElement(c.a,null,"4"),r.a.createElement(c.a,null,"5"),r.a.createElement(c.a,null,"6"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{"./src/docs/mdx/slideNext.mdx":function(e,t,n){"use strict";n.r(t);var a=n("./node_modules/react/index.js"),r=n.n(a),o=n("./node_modules/@mdx-js/tag/dist/index.js"),l=n("./node_modules/docz/dist/index.m.js"),s=n("./src/react-elastic-carousel/index.js"),c=n("./src/docs/components/SimpleItem.js"),m=void 0;function i(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}t.default=function(e){var t=e.components,n=i(e,["components"]);return r.a.createElement(o.MDXTag,{name:"wrapper",components:t},r.a.createElement(o.MDXTag,{name:"h1",components:t,props:{id:"slidenext--slideprev"}},"slideNext / slidePrev"),r.a.createElement(o.MDXTag,{name:"h4",components:t,props:{id:"you-can-trigger-the-slidenext-or-slideprev-methods-via-a-ref-to-the-carousel"}},"You can trigger the ",r.a.createElement(o.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"slideNext")," or ",r.a.createElement(o.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"slidePrev")," methods via a ",r.a.createElement(o.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"ref")," to the ",r.a.createElement(o.MDXTag,{name:"inlineCode",components:t,parentName:"h4"},"Carousel"),":"),r.a.createElement(o.MDXTag,{name:"pre",components:t},r.a.createElement(o.MDXTag,{name:"code",components:t,parentName:"pre"},"this.carousel.slideNext()\nthis.carousel.slidePrev()\n")),r.a.createElement(l.Playground,{__position:0,__code:"<button onClick={() => this.carousel.slidePrev()}>Prev</button>\n<button onClick={() => this.carousel.slideNext()}>Next</button>\n<hr />\n<Carousel ref={ref => (this.carousel = ref)}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n</Carousel>",__scope:{props:n,Carousel:s.b,Item:c.a}},r.a.createElement("button",{onClick:function(){return m.carousel.slidePrev()}},"Prev"),r.a.createElement("button",{onClick:function(){return m.carousel.slideNext()}},"Next"),r.a.createElement("hr",null),r.a.createElement(s.b,{ref:function(e){return m.carousel=e}},r.a.createElement(c.a,null,"1"),r.a.createElement(c.a,null,"2"),r.a.createElement(c.a,null,"3"),r.a.createElement(c.a,null,"4"),r.a.createElement(c.a,null,"5"),r.a.createElement(c.a,null,"6"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/mdx-vertical-mode.3fb9fdc7.js b/demo/static/js/mdx-vertical-mode.c5283b12.js
similarity index 96%
rename from demo/static/js/mdx-vertical-mode.3fb9fdc7.js
rename to demo/static/js/mdx-vertical-mode.c5283b12.js
index 6b07673..8d417e7 100644
--- a/demo/static/js/mdx-vertical-mode.3fb9fdc7.js
+++ b/demo/static/js/mdx-vertical-mode.c5283b12.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{"./src/docs/mdx/verticalMode.mdx":function(e,t,n){"use strict";n.r(t);var a=n("./node_modules/react/index.js"),l=n.n(a),r=n("./node_modules/@mdx-js/tag/dist/index.js"),o=n("./node_modules/docz/dist/index.m.js"),m=n("./src/react-elastic-carousel/index.js"),c=n("./src/docs/components/SimpleItem.js");function s(e,t){if(null==e)return{};var n,a,l=function(e,t){if(null==e)return{};var n,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}t.default=function(e){var t=e.components,n=s(e,["components"]);return l.a.createElement(r.MDXTag,{name:"wrapper",components:t},l.a.createElement(r.MDXTag,{name:"h1",components:t,props:{id:"verticalmode"}},"verticalMode"),l.a.createElement(r.MDXTag,{name:"h4",components:t,props:{id:"display-and-animate-the-carousel-in-a-vertical-layout"}},"Display and animate the Carousel in a vertical layout"),l.a.createElement(o.Playground,{__position:0,__code:"<Carousel verticalMode itemsToShow={3}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n  <Item>7</Item>\n  <Item>8</Item>\n</Carousel>",__scope:{props:n,Carousel:m.b,Item:c.a}},l.a.createElement(m.b,{verticalMode:!0,itemsToShow:3},l.a.createElement(c.a,null,"1"),l.a.createElement(c.a,null,"2"),l.a.createElement(c.a,null,"3"),l.a.createElement(c.a,null,"4"),l.a.createElement(c.a,null,"5"),l.a.createElement(c.a,null,"6"),l.a.createElement(c.a,null,"7"),l.a.createElement(c.a,null,"8"))))}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{"./src/docs/mdx/verticalMode.mdx":function(e,t,n){"use strict";n.r(t);var a=n("./node_modules/react/index.js"),l=n.n(a),r=n("./node_modules/@mdx-js/tag/dist/index.js"),o=n("./node_modules/docz/dist/index.m.js"),m=n("./src/react-elastic-carousel/index.js"),c=n("./src/docs/components/SimpleItem.js");function s(e,t){if(null==e)return{};var n,a,l=function(e,t){if(null==e)return{};var n,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}t.default=function(e){var t=e.components,n=s(e,["components"]);return l.a.createElement(r.MDXTag,{name:"wrapper",components:t},l.a.createElement(r.MDXTag,{name:"h1",components:t,props:{id:"verticalmode"}},"verticalMode"),l.a.createElement(r.MDXTag,{name:"h4",components:t,props:{id:"display-and-animate-the-carousel-in-a-vertical-layout"}},"Display and animate the Carousel in a vertical layout"),l.a.createElement(o.Playground,{__position:0,__code:"<Carousel verticalMode itemsToShow={3}>\n  <Item>1</Item>\n  <Item>2</Item>\n  <Item>3</Item>\n  <Item>4</Item>\n  <Item>5</Item>\n  <Item>6</Item>\n  <Item>7</Item>\n  <Item>8</Item>\n</Carousel>",__scope:{props:n,Carousel:m.b,Item:c.a}},l.a.createElement(m.b,{verticalMode:!0,itemsToShow:3},l.a.createElement(c.a,null,"1"),l.a.createElement(c.a,null,"2"),l.a.createElement(c.a,null,"3"),l.a.createElement(c.a,null,"4"),l.a.createElement(c.a,null,"5"),l.a.createElement(c.a,null,"6"),l.a.createElement(c.a,null,"7"),l.a.createElement(c.a,null,"8"))))}}}]);
\ No newline at end of file
diff --git a/demo/static/js/runtime~app.9c9e323fb06637a3c830.js b/demo/static/js/runtime~app.9c9e323fb06637a3c830.js
deleted file mode 100644
index 2e8c5eb..0000000
--- a/demo/static/js/runtime~app.9c9e323fb06637a3c830.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e){function t(t){for(var r,a,d=t[0],c=t[1],u=t[2],s=0,l=[];s<d.length;s++)a=d[s],o[a]&&l.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(f&&f(t);l.length;)l.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,d=1;d<n.length;d++){var c=n[d];0!==o[c]&&(r=!1)}r&&(i.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={23:0},i=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(e){var t=[],n=o[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise(function(t,r){n=o[e]=[t,r]});t.push(n[2]=r);var i,d=document.getElementsByTagName("head")[0],c=document.createElement("script");c.charset="utf-8",c.timeout=120,a.nc&&c.setAttribute("nonce",a.nc),c.src=function(e){return a.p+"static/js/"+({2:"mdx-breakpoints",3:"mdx-easing",4:"mdx-enable-auto-play",5:"mdx-go-to",6:"mdx-focus-on-select",7:"mdx-index",8:"mdx-initial-first-item",9:"mdx-is-rtl",10:"mdx-item-padding",11:"mdx-item-position",12:"mdx-items-to-scroll",13:"mdx-items-to-show",14:"mdx-on-next-end",15:"mdx-on-next-start",16:"mdx-on-prev-start",17:"mdx-on-prev-end",18:"mdx-on-resize",19:"mdx-render-arrow",20:"mdx-vertical-mode",21:"mdx-render-pagination",22:"mdx-slide-next"}[e]||e)+"."+{2:"8b0f7f1a",3:"36674c42",4:"b6a2c8d8",5:"2f9e272e",6:"e0518d92",7:"ef487804",8:"d5356dc4",9:"f2cf858c",10:"27798ebf",11:"c2529f2f",12:"66b1c473",13:"134555c9",14:"c03dd7e6",15:"b408cffe",16:"4b5257a3",17:"0291ea17",18:"75769ad9",19:"a1c5a675",20:"3fb9fdc7",21:"af3ad6e8",22:"1fdb5e4a"}[e]+".js"}(e),0!==c.src.indexOf(window.location.origin+"/")&&(c.crossOrigin="anonymous"),i=function(t){c.onerror=c.onload=null,clearTimeout(u);var n=o[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src,a=new Error("Loading chunk "+e+" failed.\n("+r+": "+i+")");a.type=r,a.request=i,n[1](a)}o[e]=void 0}};var u=setTimeout(function(){i({type:"timeout",target:c})},12e4);c.onerror=c.onload=i,d.appendChild(c)}return Promise.all(t)},a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/react-elastic-carousel/",a.oe=function(e){throw console.error(e),e};var d=window.webpackJsonp=window.webpackJsonp||[],c=d.push.bind(d);d.push=t,d=d.slice();for(var u=0;u<d.length;u++)t(d[u]);var f=c;n()}([]);
\ No newline at end of file
diff --git a/demo/static/js/runtime~app.e5afd0a5349f4d7172db.js b/demo/static/js/runtime~app.e5afd0a5349f4d7172db.js
new file mode 100644
index 0000000..cc539ce
--- /dev/null
+++ b/demo/static/js/runtime~app.e5afd0a5349f4d7172db.js
@@ -0,0 +1 @@
+!function(e){function t(t){for(var r,a,c=t[0],d=t[1],u=t[2],l=0,f=[];l<c.length;l++)a=c[l],o[a]&&f.push(o[a][0]),o[a]=0;for(r in d)Object.prototype.hasOwnProperty.call(d,r)&&(e[r]=d[r]);for(s&&s(t);f.length;)f.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,c=1;c<n.length;c++){var d=n[c];0!==o[d]&&(r=!1)}r&&(i.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={23:0},i=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(e){var t=[],n=o[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise(function(t,r){n=o[e]=[t,r]});t.push(n[2]=r);var i,c=document.getElementsByTagName("head")[0],d=document.createElement("script");d.charset="utf-8",d.timeout=120,a.nc&&d.setAttribute("nonce",a.nc),d.src=function(e){return a.p+"static/js/"+({2:"mdx-breakpoints",3:"mdx-easing",4:"mdx-enable-auto-play",5:"mdx-focus-on-select",6:"mdx-go-to",7:"mdx-index",8:"mdx-initial-first-item",9:"mdx-item-position",10:"mdx-is-rtl",11:"mdx-item-padding",12:"mdx-items-to-scroll",13:"mdx-items-to-show",14:"mdx-on-next-start",15:"mdx-on-prev-end",16:"mdx-on-next-end",17:"mdx-on-prev-start",18:"mdx-on-resize",19:"mdx-slide-next",20:"mdx-render-arrow",21:"mdx-render-pagination",22:"mdx-vertical-mode"}[e]||e)+"."+{2:"8b0f7f1a",3:"36674c42",4:"b6a2c8d8",5:"9cbe56ec",6:"81eac1b1",7:"ef487804",8:"d5356dc4",9:"9edf723c",10:"1a8626f6",11:"89a83484",12:"66b1c473",13:"134555c9",14:"e2ca4a95",15:"891bfaaf",16:"3e5221f4",17:"0e294702",18:"75769ad9",19:"635d605f",20:"c08208c7",21:"af3ad6e8",22:"c5283b12"}[e]+".js"}(e),0!==d.src.indexOf(window.location.origin+"/")&&(d.crossOrigin="anonymous"),i=function(t){d.onerror=d.onload=null,clearTimeout(u);var n=o[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src,a=new Error("Loading chunk "+e+" failed.\n("+r+": "+i+")");a.type=r,a.request=i,n[1](a)}o[e]=void 0}};var u=setTimeout(function(){i({type:"timeout",target:d})},12e4);d.onerror=d.onload=i,c.appendChild(d)}return Promise.all(t)},a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/react-elastic-carousel/",a.oe=function(e){throw console.error(e),e};var c=window.webpackJsonp=window.webpackJsonp||[],d=c.push.bind(c);c.push=t,c=c.slice();for(var u=0;u<c.length;u++)t(c[u]);var s=d;n()}([]);
\ No newline at end of file
diff --git a/doczrc.js b/doczrc.js
index 8b44aae..6e1fa66 100644
--- a/doczrc.js
+++ b/doczrc.js
@@ -15,12 +15,24 @@ export default {
   modifyBundlerConfig: config => {
     config.resolve.alias = {
       ...config.resolve.alias,
-      [libName]:path.join(__dirname, `/src/${libName}/index.js`)
+      [libName]: path.join(__dirname, `/src/${libName}/index.js`)
     }
     return config;
   },
   htmlContext: {
     head: {
+      scripts: [
+        {
+          async: 'async',
+          src: 'https://www.googletagmanager.com/gtag/js?id=UA-127217040-1'
+        }
+      ],
+    raw:   `<script>
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', 'UA-127217040-1');
+            </script>`,
       links: [{
         rel: 'stylesheet',
         href: '//codemirror.net/theme/dracula.css'