A major PR for resolving RTL support, Responsive and SSR together and some fixes.

.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

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).

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            |

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 <[email protected]> (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",

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>