diff --git a/.npmignore b/.npmignore
index fa4a78d..42007bb 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,3 +1,5 @@
+src/
+docs/
 demo/
 tests/
 gh-pages/
@@ -12,3 +14,8 @@ yarn-error.log
 .browserslistrc
 dist/demo.html
 dist/bit
+.idea
+release.config.js
+.bitmap
+package-lock.json
+.gitattributes
diff --git a/README.md b/README.md
index 3b7467d..f096838 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,13 @@
-# vue-slick-carousel
+# vue-slick-carousel-rtl.
+
+This package is designed based on the [vue-slick-carousel package](https://github.com/gs-shop/vue-slick-carousel) but with corrected rtl support.
 
 > 🚥 Vue Slick Carousel with True SSR Written for Faster [Luxstay](https://www.luxstay.com). This Is a Port of [react-slick](https://github.com/akiran/react-slick).
 
-[![npm version](https://img.shields.io/npm/v/vue-slick-carousel.svg)](https://www.npmjs.com/package/vue-slick-carousel)
+[![npm version](https://img.shields.io/npm/v/vue-slick-carousel-rtl.svg)](https://www.npmjs.com/package/vue-slick-carousel-rtl)
 [![bit](https://img.shields.io/bit/collection/total-components/gsshop/vue-slick-carousel)](https://bit.dev/gsshop/vue-slick-carousel/vue-slick-carousel)
-[![license](https://img.shields.io/npm/l/vue-slick-carousel)](https://github.com/gs-shop/vue-slick-carousel/blob/master/LICENSE)
-[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/gs-shop/vue-slick-carousel/issues?&q=is%3Aissue+is%3Aopen)
+[![license](https://img.shields.io/npm/l/vue-slick-carousel-rtl)](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/LICENSE)
+[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/Iran-110/vue-slick-carousel-rtl/issues?&q=is%3Aissue+is%3Aopen)
 [![code with hearth by GSShop](https://img.shields.io/badge/gsshop-%3C%2F%3E%20-cadb2a.svg)](https://github.com/gs-shop)
 [![hearth for Luxstay](https://img.shields.io/badge/luxstay-%20%E2%99%A5%20-ff3333.svg)](https://www.luxstay.com)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
@@ -57,9 +59,9 @@ Here're nuxt examples for you to test yourself:
 
 ```bash
 # npm
-npm i vue-slick-carousel
+npm i vue-slick-carousel-rtl
 # yarn
-yarn add vue-slick-carousel
+yarn add vue-slick-carousel-rtl
 # bit
 bit import gsshop.vue-slick-carousel/vue-slick-carousel
 ```
@@ -90,10 +92,10 @@ See [API](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md)
 </template>
 
 <script>
-  import VueSlickCarousel from 'vue-slick-carousel'
-  import 'vue-slick-carousel/dist/vue-slick-carousel.css'
+  import VueSlickCarousel from 'vue-slick-carousel-rtl'
+  import 'vue-slick-carousel-rtl/dist/vue-slick-carousel-rtl.css'
   // optional style for arrows & dots
-  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
+  import 'vue-slick-carousel-rtl/dist/vue-slick-carousel-theme.css'
 
   export default {
     name: 'MyComponent',
@@ -107,16 +109,16 @@ See [API](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md)
 ## 📚 Docs
 
 - [examples](https://gs-shop.github.io/vue-slick-carousel/#/example/)
-- [settings props](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#props)
-- [methods](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#methods)
-- [events](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#events)
-- [slots](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#slots)
-- [contributing](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/CONTRIBUTING.md)
-- [commit message convention](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md)
-- [code of conduct](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/CODE_OF_CONDUCT.md)
+- [settings props](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/docs/API.md#props)
+- [methods](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/docs/API.md#methods)
+- [events](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/docs/API.md#events)
+- [slots](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/docs/API.md#slots)
+- [contributing](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/docs/CONTRIBUTING.md)
+- [commit message convention](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md)
+- [code of conduct](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/docs/CODE_OF_CONDUCT.md)
 
 <br/>
 
 ## 🔖 License
 
-This software is licensed under the [MIT](https://github.com/gs-shop/vue-slick-carousel/blob/master/LICENSE).
+This software is licensed under the [MIT](https://github.com/Iran-110/vue-slick-carousel-rtl/blob/master/LICENSE).
diff --git a/docs/API.md b/docs/API.md
index 648e81f..c3b3781 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -65,7 +65,7 @@ Check out [demo examples](https://gs-shop.github.io/vue-slick-carousel/#/example
 | pauseOnHover     | pauses autoplay while hovering on track                                                                                                                                          | boolean | -                     | true         |
 | responsive       | breakpoints and settings objects (see demo). enables settings sets at given screen width. set settings to "unslick" instead of an object to disable slick at a given breakpoint. | array   | -                     | null         |
 | rows             | enables grid mode, number of rows per slide in the slider                                                                                                                        | number  | -                     | 1            |
-| rtl              | reverses the slider's direction to become right-to-left                                                                                                                          | boolean | -                     | false        |
+| rtl              | change the slider's direction to right-to-left                                                                                                                          | boolean | -                     | false        |
 | slidesPerRow     | number of slides to display in grid mode, this is useful with rows option                                                                                                        | number  | -                     | 1            |
 | slidesToScroll   | number of slides to scroll                                                                                                                                                       | number  | -                     | 1            |
 | slidesToShow     | number of slides to show                                                                                                                                                         | number  | -                     | 1            |
diff --git a/package.json b/package.json
index 08791a9..3c5133d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "vue-slick-carousel",
-  "version": "1.0.6",
+  "name": "vue-slick-carousel-rtl",
+  "version": "1.0.10",
   "description": "Vue Slick Carousel with True SSR Written for Faster Luxstay",
   "keywords": [
     "vue",
@@ -13,13 +13,13 @@
   ],
   "homepage": "https://gs-shop.github.io/vue-slick-carousel/",
   "bugs": {
-    "url": "https://github.com/gs-shop/vue-slick-carousel/issues"
+    "url": "https://github.com/iran-110/vue-slick-carousel-rtl/issues"
   },
   "license": "MIT",
-  "author": "KyuWoo Choi <kyuwoo.choi@gmail.com> (https://kyu.io/)",
+  "author": "KyuWoo Choi",
   "repository": {
     "type": "git",
-    "url": "https://github.com/gs-shop/vue-slick-carousel.git"
+    "url": "https://github.com/iran-110/vue-slick-carousel-rtl.git"
   },
   "scripts": {
     "serve": "vue-cli-service serve --open",
@@ -31,7 +31,7 @@
     "test:unit:watch": "vue-cli-service test:unit --watch",
     "release": "semantic-release --no-ci"
   },
-  "main": "dist/vue-slick-carousel.umd.js",
+  "main": "dist/vue-slick-carousel-rtl.umd.js",
   "dependencies": {
     "enquire.js": "2.1.6",
     "json2mq": "0.2.0",
diff --git a/src/InnerSlider.vue b/src/InnerSlider.vue
index 2bfff43..4b64125 100644
--- a/src/InnerSlider.vue
+++ b/src/InnerSlider.vue
@@ -53,7 +53,7 @@ export default {
   },
   computed: {
     slideCount() {
-      return this.$slots.default.length
+      return (this.$slots.default && this.$slots.default.length) || 0
     },
     spec() {
       return {
@@ -166,7 +166,7 @@ export default {
       }
       let setTrackStyle = false
       for (let key of Object.keys(this.$props)) {
-        if (!nextProps.hasOwnProperty(key)) {
+        if (!nextProps.hasOwnProperty.call(nextProps, key)) {
           setTrackStyle = true
           break
         }
@@ -201,7 +201,8 @@ export default {
       let targetLeft = getTrackLeft(spec)
       spec = { ...spec, left: targetLeft }
       let trackStyle = getTrackCSS(spec)
-      if (setTrackStyle || this.slideCount !== spec.children.length) {
+      let slideCount = (spec.children && spec.children.length) || 0
+      if (setTrackStyle || this.slideCount !== slideCount) {
         updatedState['trackStyle'] = trackStyle
       }
       Object.assign(this.$data, updatedState)
@@ -500,14 +501,10 @@ export default {
     },
     play() {
       var nextIndex
-      if (this.rtl) {
-        nextIndex = this.currentSlide - this.slidesToScroll
+      if (canGoNext({ ...this.$props, ...this.$data })) {
+        nextIndex = this.currentSlide + this.slidesToScroll
       } else {
-        if (canGoNext({ ...this.$props, ...this.$data })) {
-          nextIndex = this.currentSlide + this.slidesToScroll
-        } else {
-          return false
-        }
+        return false
       }
 
       this.slideHandler(nextIndex)
@@ -680,7 +677,7 @@ export default {
     })
 
     return (
-      <div class={className} dir={!this.unslick ? 'ltr' : false}>
+      <div class={className} dir={this.rtl ? 'rtl' : 'ltr'}>
         {!this.unslick ? prevArrow : ''}
         <div
           ref="list"
@@ -742,4 +739,13 @@ export default {
   cursor: pointer;
   cursor: hand;
 }
+.slick-slider[dir='rtl'] >>> .slick-slide {
+  float: right;
+}
+.slick-slider[dir='ltr'] >>> .slick-slide {
+  float: left;
+}
+.slick-slider .slick-list {
+  transition: height 0.3s ease;
+}
 </style>
diff --git a/src/SliderTrack.vue b/src/SliderTrack.vue
index 264f266..9a4b8ad 100644
--- a/src/SliderTrack.vue
+++ b/src/SliderTrack.vue
@@ -55,6 +55,8 @@ const getSlideStyle = spec => {
     style.position = 'relative'
     if (spec.vertical) {
       style.top = `${-spec.index * parseInt(spec.slideHeight)}px`
+    } else if (spec.rtl) {
+      style.right = `${-spec.index * parseInt(spec.slideWidth)}px`
     } else {
       style.left = `${-spec.index * parseInt(spec.slideWidth)}px`
     }
@@ -101,114 +103,123 @@ export default {
       let slides = []
       let preCloneSlides = []
       let postCloneSlides = []
-      let childrenCount = children.length
+      let childrenCount = (children && children.length) || 0
       let startIndex = lazyStartIndex(spec)
       let endIndex = lazyEndIndex(spec)
 
-      children.forEach((elem, index) => {
-        let child
-        let childOnClickOptions = {
-          message: 'children',
-          index: index,
-          slidesToScroll: spec.slidesToScroll,
-          currentSlide: spec.currentSlide,
-        }
+      children &&
+        children.forEach((elem, index) => {
+          let child
+          let childOnClickOptions = {
+            message: 'children',
+            index: index,
+            slidesToScroll: spec.slidesToScroll,
+            currentSlide: spec.currentSlide,
+          }
 
-        // in case of lazyLoad, whether or not we want to fetch the slide
-        if (
-          !spec.lazyLoad ||
-          (spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0)
-        ) {
-          child = elem
-        } else {
-          child = <div />
-        }
-        let childStyle = getSlideStyle({ ...spec, index })
-        let slideClasses = getSlideClasses({ ...spec, index })
-        // push a cloned element of the desired slide
-        slides.push(
-          this.cloneSlide(child, {
-            key: 'original' + getKey(child, index),
-            class: slideClasses,
-            style: {
-              outline: 'none',
-              ...childStyle,
-            },
-            attrs: {
-              tabIndex: '-1',
-              'data-index': index,
-              'aria-hidden': `${!slideClasses['slick-active']}`,
-            },
-            childOnClickOptions,
-          }),
-        )
+          // in case of lazyLoad, whether or not we want to fetch the slide
+          if (
+            !spec.lazyLoad ||
+            (spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0)
+          ) {
+            child = elem
+          } else {
+            child = <div />
+          }
+          let childStyle = getSlideStyle({
+            ...spec,
+            index,
+          })
+          let slideClasses = getSlideClasses({
+            ...spec,
+            index,
+          })
+          // push a cloned element of the desired slide
+          slides.push(
+            this.cloneSlide(child, {
+              key: 'original' + getKey(child, index),
+              class: slideClasses,
+              style: {
+                outline: 'none',
+                ...childStyle,
+              },
+              attrs: {
+                tabIndex: '-1',
+                'data-index': index,
+                'aria-hidden': `${!slideClasses['slick-active']}`,
+              },
+              childOnClickOptions,
+            }),
+          )
 
-        // if slide needs to be precloned or postcloned
-        if (
-          spec.infinite &&
-          spec.fade === false &&
-          childrenCount > spec.slidesToShow
-        ) {
-          let preCloneNo = childrenCount - index
+          // if slide needs to be precloned or postcloned
           if (
-            preCloneNo <= getPreClones(spec) &&
-            childrenCount !== spec.slidesToShow
+            spec.infinite &&
+            spec.fade === false &&
+            childrenCount > spec.slidesToShow
           ) {
-            key = -preCloneNo
-            if (key >= startIndex) {
-              child = elem
+            let preCloneNo = childrenCount - index
+            if (
+              preCloneNo <= getPreClones(spec) &&
+              childrenCount !== spec.slidesToShow
+            ) {
+              key = -preCloneNo
+              if (key >= startIndex) {
+                child = elem
+              }
+              slideClasses = getSlideClasses({
+                ...spec,
+                index: key,
+              })
+              preCloneSlides.push(
+                this.cloneSlide(child, {
+                  key: 'precloned' + getKey(child, key),
+                  class: slideClasses,
+                  style: childStyle,
+                  attrs: {
+                    tabIndex: '-1',
+                    'data-index': key,
+                    'aria-hidden': `${!slideClasses['slick-active']}`,
+                  },
+                  childOnClickOptions,
+                }),
+              )
             }
-            slideClasses = getSlideClasses({ ...spec, index: key })
-            preCloneSlides.push(
-              this.cloneSlide(child, {
-                key: 'precloned' + getKey(child, key),
-                class: slideClasses,
-                style: childStyle,
-                attrs: {
-                  tabIndex: '-1',
-                  'data-index': key,
-                  'aria-hidden': `${!slideClasses['slick-active']}`,
-                },
-                childOnClickOptions,
-              }),
-            )
-          }
 
-          if (childrenCount !== spec.slidesToShow) {
-            key = childrenCount + index
-            if (key < endIndex) {
-              child = elem
+            if (childrenCount !== spec.slidesToShow) {
+              key = childrenCount + index
+              if (key < endIndex) {
+                child = elem
+              }
+              slideClasses = getSlideClasses({
+                ...spec,
+                index: key,
+              })
+              postCloneSlides.push(
+                this.cloneSlide(child, {
+                  key: 'postcloned' + getKey(child, key),
+                  class: slideClasses,
+                  style: childStyle,
+                  attrs: {
+                    tabIndex: '-1',
+                    'data-index': key,
+                    'aria-hidden': `${!slideClasses['slick-active']}`,
+                  },
+                  childOnClickOptions,
+                }),
+              )
             }
-            slideClasses = getSlideClasses({ ...spec, index: key })
-            postCloneSlides.push(
-              this.cloneSlide(child, {
-                key: 'postcloned' + getKey(child, key),
-                class: slideClasses,
-                style: childStyle,
-                attrs: {
-                  tabIndex: '-1',
-                  'data-index': key,
-                  'aria-hidden': `${!slideClasses['slick-active']}`,
-                },
-                childOnClickOptions,
-              }),
-            )
           }
-        }
-      }, this)
+        }, this)
 
-      if (spec.rtl) {
-        return preCloneSlides.concat(slides, postCloneSlides).reverse()
-      } else {
-        return preCloneSlides.concat(slides, postCloneSlides)
-      }
+      return preCloneSlides.concat(slides, postCloneSlides)
     },
   },
   render() {
     const slides = this.renderSlides(this.$props, this.$slots.default)
     return (
       <div
-        class={{ 'slick-track': true, 'slick-center': this.$props.centerMode }}
+        class={{ 'slick-track': true, 'slick-center': this.centerMode }}
         style={this.trackStyle}>
         {slides}
       </div>
@@ -253,9 +264,6 @@ export default {
   height: 100%;
   min-height: 1px;
 }
-[dir='rtl'] .slick-slide {
-  float: right;
-}
 .slick-slide img {
   display: block;
 }
diff --git a/src/VueSlickCarousel.vue b/src/VueSlickCarousel.vue
index e0b70b8..485e304 100644
--- a/src/VueSlickCarousel.vue
+++ b/src/VueSlickCarousel.vue
@@ -34,6 +34,17 @@ export default {
       let newProps
 
       if (this.breakpoint) {
+        // define the maximum `SlidesToShow` for SSR compatibility.
+        let maxSlidesToShow = this.slidesToShow
+        this.responsive.forEach(resp => {
+          if (
+            resp.settings.slidesToShow &&
+            maxSlidesToShow < resp.settings.slidesToShow
+          ) {
+            maxSlidesToShow = resp.settings.slidesToShow
+          }
+        })
+        // select the current breakpoint
         newProps = this.responsive.filter(
           resp => resp.breakpoint === this.breakpoint,
         )
@@ -44,6 +55,7 @@ export default {
                 ...defaultValues,
                 ...props,
                 ...newProps[0].settings,
+                maxSlidesToShow,
               }
       } else {
         settings = { ...defaultValues, ...props }
@@ -227,9 +239,7 @@ export default {
       }
     }
 
-    if (newChildren.length <= settings.slidesToShow) {
-      settings.unslick = true
-    }
+    settings.unslick = newChildren.length <= settings.slidesToShow
 
     return (
       <InnerSlider
diff --git a/src/defaultProps.js b/src/defaultProps.js
index 1299746..2f09ffb 100644
--- a/src/defaultProps.js
+++ b/src/defaultProps.js
@@ -17,6 +17,7 @@ export const props = {
   infinite: { type: Boolean, default: true },
   initialSlide: { type: Number, default: 0 },
   lazyLoad: { type: String, default: null },
+  maxSlidesToShow: { type: Number, default: null },
   pauseOnDotsHover: { type: Boolean, default: false },
   pauseOnFocus: { type: Boolean, default: false },
   pauseOnHover: { type: Boolean, default: true },
diff --git a/src/innerSliderUtils.js b/src/innerSliderUtils.js
index b9e29b3..e50bd58 100644
--- a/src/innerSliderUtils.js
+++ b/src/innerSliderUtils.js
@@ -12,6 +12,10 @@ export const getPreClones = spec => {
   if (spec.variableWidth) {
     return spec.slideCount
   }
+  if (spec.maxSlidesToShow) {
+    // in responsive state, use the maximum number of `slidesToShow` for supporting SSR
+    return spec.maxSlidesToShow + (spec.centerMode ? 1 : 0)
+  }
   return spec.slidesToShow + (spec.centerMode ? 1 : 0)
 }
 
@@ -32,52 +36,34 @@ export const keyHandler = (e, accessibility, rtl) => {
 
 export const siblingDirection = spec => {
   if (spec.targetSlide > spec.currentSlide) {
-    if (spec.targetSlide > spec.currentSlide + slidesOnRight(spec)) {
-      return 'left'
+    if (spec.targetSlide > spec.currentSlide + slidesAfter(spec)) {
+      return spec.rtl ? 'right' : 'left'
     }
-    return 'right'
+    return spec.rtl ? 'left' : 'right'
   } else {
-    if (spec.targetSlide < spec.currentSlide - slidesOnLeft(spec)) {
-      return 'right'
+    if (spec.targetSlide < spec.currentSlide - slidesBefore(spec)) {
+      return spec.rtl ? 'left' : 'right'
     }
-    return 'left'
+    return spec.rtl ? 'right' : 'left'
   }
 }
 
-export const slidesOnRight = ({
-  slidesToShow,
-  centerMode,
-  rtl,
-  centerPadding,
-}) => {
+export const slidesAfter = ({ slidesToShow, centerMode, centerPadding }) => {
   // returns no of slides on the right of active slide
   if (centerMode) {
-    let right = (slidesToShow - 1) / 2 + 1
-    if (parseInt(centerPadding) > 0) right += 1
-    if (rtl && slidesToShow % 2 === 0) right += 1
-    return right
-  }
-  if (rtl) {
-    return 0
+    let after = (slidesToShow - 1) / 2 + 1
+    if (parseInt(centerPadding) > 0) after += 1
+    return after
   }
   return slidesToShow - 1
 }
 
-export const slidesOnLeft = ({
-  slidesToShow,
-  centerMode,
-  rtl,
-  centerPadding,
-}) => {
+export const slidesBefore = ({ slidesToShow, centerMode, centerPadding }) => {
   // returns no of slides on the left of active slide
   if (centerMode) {
-    let left = (slidesToShow - 1) / 2 + 1
-    if (parseInt(centerPadding) > 0) left += 1
-    if (!rtl && slidesToShow % 2 === 0) left += 1
-    return left
-  }
-  if (rtl) {
-    return slidesToShow - 1
+    let before = (slidesToShow - 1) / 2 + 1
+    if (parseInt(centerPadding) > 0) before += 1
+    return before
   }
   return 0
 }
@@ -110,7 +96,7 @@ export const getOnDemandLazySlides = spec => {
 }
 
 export const changeSlide = (spec, options) => {
-  var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide
+  let indexOffset, previousInt, slideOffset, unevenOffset, targetSlide
   const {
     slidesToScroll,
     slidesToShow,
@@ -150,9 +136,15 @@ export const changeSlide = (spec, options) => {
     }
     if (infinite) {
       let direction = siblingDirection({ ...spec, targetSlide })
-      if (targetSlide > options.currentSlide && direction === 'left') {
+      if (
+        targetSlide > options.currentSlide &&
+        direction === (spec.rtl ? 'right' : 'left')
+      ) {
         targetSlide = targetSlide - slideCount
-      } else if (targetSlide < options.currentSlide && direction === 'right') {
+      } else if (
+        targetSlide < options.currentSlide &&
+        direction === (spec.rtl ? 'left' : 'right')
+      ) {
         targetSlide = targetSlide + slideCount
       }
     }
@@ -240,7 +232,7 @@ export const swipeMove = (e, spec) => {
     positionOffset = touchObject.curY > touchObject.startY ? 1 : -1
 
   let dotCount = Math.ceil(slideCount / slidesToScroll)
-  let swipeDirection = getSwipeDirection(spec.touchObject, verticalSwiping)
+  let swipeDirection = getSwipeDirection(spec.touchObject, verticalSwiping, rtl)
   let touchSwipeLength = touchObject.swipeLength
   if (!infinite) {
     if (
@@ -260,11 +252,7 @@ export const swipeMove = (e, spec) => {
     state['swiped'] = true
   }
   if (!vertical) {
-    if (!rtl) {
-      swipeLeft = curLeft + touchSwipeLength * positionOffset
-    } else {
-      swipeLeft = curLeft - touchSwipeLength * positionOffset
-    }
+    swipeLeft = curLeft + touchSwipeLength * positionOffset
   } else {
     swipeLeft =
       curLeft + touchSwipeLength * (listHeight / listWidth) * positionOffset
@@ -303,6 +291,7 @@ export const swipeEnd = (e, spec) => {
     swipeToSlide,
     scrolling,
     onSwipe,
+    rtl,
   } = spec
   if (!dragging) {
     if (swipe) e.preventDefault()
@@ -311,7 +300,7 @@ export const swipeEnd = (e, spec) => {
   let minSwipe = verticalSwiping
     ? listHeight / touchThreshold
     : listWidth / touchThreshold
-  let swipeDirection = getSwipeDirection(touchObject, verticalSwiping)
+  let swipeDirection = getSwipeDirection(touchObject, verticalSwiping, rtl)
   // reset the state of touch related state variables.
   let state = {
     dragging: false,
@@ -338,13 +327,13 @@ export const swipeEnd = (e, spec) => {
       case 'left':
       case 'up':
         newSlide = currentSlide + getSlideCount(spec)
-        slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide
+        slideCount = swipeToSlide ? newSlide : checkNavigable(spec, newSlide)
         state['currentDirection'] = 0
         break
       case 'right':
       case 'down':
         newSlide = currentSlide - getSlideCount(spec)
-        slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide
+        slideCount = swipeToSlide ? newSlide : checkNavigable(spec, newSlide)
         state['currentDirection'] = 1
         break
       default:
@@ -360,29 +349,34 @@ export const swipeEnd = (e, spec) => {
 }
 export const getNavigableIndexes = spec => {
   let max = spec.infinite ? spec.slideCount * 2 : spec.slideCount
-  let breakpoint = spec.infinite ? spec.slidesToShow * -1 : 0
-  let counter = spec.infinite ? spec.slidesToShow * -1 : 0
+  let breakpoint = spec.infinite ? spec.currentSlide : 0
   let indexes = []
   while (breakpoint < max) {
     indexes.push(breakpoint)
-    breakpoint = counter + spec.slidesToScroll
-    counter += Math.min(spec.slidesToScroll, spec.slidesToShow)
+    breakpoint += Math.min(spec.slidesToScroll, spec.slidesToShow)
+  }
+  if (spec.infinite) {
+    for (
+      breakpoint =
+        spec.currentSlide - Math.min(spec.slidesToScroll, spec.slidesToShow);
+      breakpoint >= spec.slidesToShow * -1;
+      breakpoint -= Math.min(spec.slidesToScroll, spec.slidesToShow)
+    ) {
+      indexes.push(breakpoint)
+    }
+    indexes.sort(function(a, b) {
+      return a - b
+    })
   }
   return indexes
 }
 export const checkNavigable = (spec, index) => {
   const navigables = getNavigableIndexes(spec)
-  let prevNavigable = 0
   if (index > navigables[navigables.length - 1]) {
     index = navigables[navigables.length - 1]
   } else {
-    for (let n in navigables) {
-      if (index < navigables[n]) {
-        index = prevNavigable
-        break
-      }
-      prevNavigable = navigables[n]
-    }
+    const nav = navigables.map(navIndex => Math.abs(navIndex - index))
+    index = navigables[nav.indexOf(Math.min(...nav))]
   }
   return index
 }
@@ -397,10 +391,11 @@ export const getSlideCount = spec => {
     const slides = slickList.querySelectorAll('.slick-slide')
     Array.from(slides).every(slide => {
       if (!spec.vertical) {
-        if (
-          slide.offsetLeft - centerOffset + getWidth(slide) / 2 >
-          spec.swipeLeft * -1
-        ) {
+        const offsetRight =
+          slide.parentNode.offsetWidth - slide.offsetLeft - slide.offsetWidth
+        const offsetLeft = slide.offsetLeft
+        const offset = spec.rtl ? offsetRight : offsetLeft
+        if (offset - centerOffset + getWidth(slide) / 2 > spec.swipeLeft * -1) {
           swipedSlide = slide
           return false
         }
@@ -417,10 +412,7 @@ export const getSlideCount = spec => {
     if (!swipedSlide) {
       return 0
     }
-    const currentIndex =
-      spec.rtl === true
-        ? spec.slideCount - spec.currentSlide
-        : spec.currentSlide
+    const currentIndex = spec.currentSlide
     const slidesTraversed =
       Math.abs(swipedSlide.dataset.index - currentIndex) || 1
     return slidesTraversed
@@ -458,6 +450,7 @@ export const PROP_KEYS = {
     'variableWidth',
     'unslick',
     'centerPadding',
+    'maxSlidesToShow',
   ],
   DOT: [
     'dotsClass',
@@ -508,7 +501,6 @@ export const slideHandler = spec => {
     lazyLoad,
     currentSlide,
     centerMode,
-    slidesToScroll,
     slidesToShow,
     useCSS,
   } = spec
@@ -540,8 +532,8 @@ export const slideHandler = spec => {
     if (animationSlide < 0) {
       finalSlide = animationSlide + slideCount
       if (!infinite) finalSlide = 0
-      else if (slideCount % slidesToScroll !== 0)
-        finalSlide = slideCount - (slideCount % slidesToScroll)
+      // else if (slideCount % slidesToScroll !== 0)
+      //   finalSlide = slideCount - (slideCount % slidesToScroll)
     } else if (!canGoNext(spec) && animationSlide > currentSlide) {
       animationSlide = finalSlide = currentSlide
     } else if (centerMode && animationSlide >= slideCount) {
@@ -550,7 +542,7 @@ export const slideHandler = spec => {
     } else if (animationSlide >= slideCount) {
       finalSlide = animationSlide - slideCount
       if (!infinite) finalSlide = slideCount - slidesToShow
-      else if (slideCount % slidesToScroll !== 0) finalSlide = 0
+      // else if (slideCount % slidesToScroll !== 0) finalSlide = 0
     }
     animationLeft = getTrackLeft({ ...spec, slideIndex: animationSlide })
     finalLeft = getTrackLeft({ ...spec, slideIndex: finalSlide })
@@ -590,8 +582,12 @@ export const slideHandler = spec => {
 export const getWidth = elem => (elem && elem.offsetWidth) || 0
 export const getHeight = elem => (elem && elem.offsetHeight) || 0
 
-export const getSwipeDirection = (touchObject, verticalSwiping = false) => {
-  var xDist, yDist, r, swipeAngle
+export const getSwipeDirection = (
+  touchObject,
+  verticalSwiping = false,
+  rtl = false,
+) => {
+  let xDist, yDist, r, swipeAngle
   xDist = touchObject.startX - touchObject.curX
   yDist = touchObject.startY - touchObject.curY
   r = Math.atan2(yDist, xDist)
@@ -603,10 +599,10 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => {
     (swipeAngle <= 45 && swipeAngle >= 0) ||
     (swipeAngle <= 360 && swipeAngle >= 315)
   ) {
-    return 'left'
+    return !rtl ? 'left' : 'right'
   }
   if (swipeAngle >= 135 && swipeAngle <= 225) {
-    return 'right'
+    return !rtl ? 'right' : 'left'
   }
   if (verticalSwiping === true) {
     if (swipeAngle >= 35 && swipeAngle <= 135) {
@@ -622,7 +618,7 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => {
 // get initialized state
 export const initializedState = spec => {
   // spec also contains listRef, trackRef
-  let slideCount = spec.children.length
+  let slideCount = (spec.children && spec.children.length) || 0
   let listWidth = Math.ceil(getWidth(spec.listRef))
   let trackWidth = Math.ceil(getWidth(spec.trackRef))
   let slideWidth
@@ -643,9 +639,6 @@ export const initializedState = spec => {
   let listHeight = slideHeight * spec.slidesToShow
   let currentSlide =
     spec.currentSlide === undefined ? spec.initialSlide : spec.currentSlide
-  if (spec.rtl && spec.currentSlide === undefined) {
-    currentSlide = slideCount - 1 - spec.initialSlide
-  }
   let lazyLoadedList = spec.lazyLoadedList || []
   let slidesToLoad = getOnDemandLazySlides(
     { currentSlide, lazyLoadedList },
@@ -706,10 +699,10 @@ export const getTrackLeft = spec => {
     vertical,
   } = spec
 
-  var slideOffset = 0
-  var targetLeft
-  var targetSlide
-  var verticalOffset = 0
+  let slideOffset = 0
+  let targetLeft
+  let targetSlide
+  let verticalOffset = 0
 
   if (fade || spec.slideCount === 1) {
     return 0
@@ -719,14 +712,15 @@ export const getTrackLeft = spec => {
   if (infinite) {
     slidesToOffset = -getPreClones(spec) // bring active slide to the beginning of visual area
     // if next scroll doesn't have enough children, just reach till the end of original slides instead of shifting slidesToScroll children
-    if (
-      slideCount % slidesToScroll !== 0 &&
-      slideIndex + slidesToScroll > slideCount
-    ) {
-      slidesToOffset = -(slideIndex > slideCount
-        ? slidesToShow - (slideIndex - slideCount)
-        : slideCount % slidesToScroll)
-    }
+    // const postSlides = getPostClones(spec)
+    // if (
+    //   slideCount % slidesToScroll !== 0 &&
+    //   slideIndex + slidesToScroll > slideCount // + postSlides
+    // ) {
+    //   slidesToOffset = -(slideIndex > slideCount
+    //     ? slidesToShow - (slideIndex - slideCount)
+    //     : slideCount % slidesToScroll)
+    // }
     // shift current slide to center of the frame
     if (centerMode) {
       slidesToOffset += parseInt(slidesToShow / 2)
@@ -752,11 +746,17 @@ export const getTrackLeft = spec => {
   }
 
   if (variableWidth === true) {
-    var targetSlideIndex
+    let targetSlideIndex
     let trackElem = trackRef.$el
     targetSlideIndex = slideIndex + getPreClones(spec)
     targetSlide = trackElem && trackElem.childNodes[targetSlideIndex]
-    targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0
+    const offsetRight =
+      targetSlide.parentNode.offsetWidth -
+      targetSlide.offsetLeft -
+      targetSlide.offsetWidth
+    const offsetLeft = targetSlide.offsetLeft
+    const offset = spec.rtl ? offsetRight : offsetLeft
+    targetLeft = targetSlide ? offset * -1 : 0
     if (centerMode === true) {
       targetSlideIndex = infinite ? slideIndex + getPreClones(spec) : slideIndex
       targetSlide = trackElem && trackElem.children[targetSlideIndex]
@@ -781,7 +781,10 @@ export const getTotalSlides = spec =>
     : getPreClones(spec) + spec.slideCount + getPostClones(spec)
 
 export const checkSpecKeys = (spec, keysArray) =>
-  keysArray.reduce((value, key) => value && spec.hasOwnProperty(key), true)
+  keysArray.reduce(
+    (value, key) => value && spec.hasOwnProperty.call(spec, key),
+    true,
+  )
     ? null
     : console.error('Keys Missing:', spec) // eslint-disable-line no-console
 
@@ -806,14 +809,15 @@ export const getTrackCSS = spec => {
     WebkitTransition: '',
   }
   if (spec.useTransform) {
+    const correctedLeft = spec.rtl ? -spec.left : spec.left
     let WebkitTransform = !spec.vertical
-      ? 'translate3d(' + spec.left + 'px, 0px, 0px)'
+      ? 'translate3d(' + correctedLeft + 'px, 0px, 0px)'
       : 'translate3d(0px, ' + spec.left + 'px, 0px)'
     let transform = !spec.vertical
-      ? 'translate3d(' + spec.left + 'px, 0px, 0px)'
+      ? 'translate3d(' + correctedLeft + 'px, 0px, 0px)'
       : 'translate3d(0px, ' + spec.left + 'px, 0px)'
     let msTransform = !spec.vertical
-      ? 'translateX(' + spec.left + 'px)'
+      ? 'translateX(' + correctedLeft + 'px)'
       : 'translateY(' + spec.left + 'px)'
     style = {
       ...style,