Merge pull request #18 from hanssagita/release/0.8.0

Release/0.8.0

Author: hanssagita

README.md

@@ -1,7 +1,7 @@
 # 🐱🐱🐱 Vue-Cat-Carousel 🐱🐱🐱
 
 
-Simple and lightest Carousel 
+Simple, customizable, reactive and lightest Carousel 
 
 
 ## Install
@@ -48,8 +48,7 @@ How to use it in HTML
 <cat-carousel
  :items="items"
  :item-per-page="5"
- :hide-indicators="false"
- :indicators-item-size="10"
+ :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1', hideIndicators: false}"
  >
  <template
  slot="item"
@@ -84,7 +83,6 @@ Slider：
 | --------------- | -------------------------------- | ---------- | ---------------------------------------------------------------------- |
 | items | list | [] | List of items in loop |
 | item-per-page | number | 5 | List of items in one page |
-| hide-indicators | boolean | false | show and hide carousel indicators |
 | indicators-config | Object | INDICATORS_DEFAULT_CONFIG | define carousel indicators item size |
 
 INDICATORS_DEFAULT_CONFIG
@@ -94,6 +92,7 @@ property | type | value | description
 size | number | 16 | size of indicators in pixel
 color | string | '#d6d6d6' | color of indicators (hex, rgb, etc)
 activeColor | string | '#0095da' | color of active indicator (hex, rgb, etc)
+hideIndicators | boolean | false | show and hide carousel indicators
 
 ## Slots
 
@@ -108,8 +107,7 @@ Previous navigation:
 <cat-carousel
  :items="items"
  :item-per-page="5"
- :hide-indicators="false"
- :indicators-item-size="10"
+ :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1', hideIndicators: false}"
  >
  <template
  slot="prev-navigation"
@@ -125,8 +123,7 @@ Next navigation:
 <cat-carousel
  :items="items"
  :item-per-page="5"
- :hide-indicators="false"
- :indicators-item-size="10"
+ :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1', hideIndicators: false}"
  >
  <template
  slot="prev-navigation"

demo/index.html

@@ -107,8 +107,7 @@
  <cat-carousel
  :items="products"
  :item-per-page="itemPerPage"
- :hide-indicators="false"
- :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1'}"
+ :indicators-config="{activeColor: '#000', size: 10, color: '#d1d1d1', hideIndicators: false}"
  >
  <template
  slot="item"

package.json

@@ -1,6 +1,6 @@
 {
  "name": "vue-cat-carousel",
- "version": "0.8.0",
+ "version": "0.8.3",
  "description": "vue-cat-carousel is a slider component of Vue.js.",
  "keywords": [
  "slide",

src/CatCarousel.vue

@@ -7,7 +7,7 @@
  <template>
  <slot name="prev-navigation" :prev="prev">
  <div class="cat-carousel__default-nav cat-carousel__default-nav--left" @click="prev">
- <img src="https://i.imgur.com/JkraWHJ.png">
+ <img src="https://i.imgur.com/PpHTPrc.png">
  </div>
  </slot>
  </template>
@@ -47,7 +47,7 @@
  <template>
  <slot name="next-navigation" :next="next">
  <div class="cat-carousel__default-nav" @click="next">
- <img src="https://i.imgur.com/JkraWHJ.png">
+ <img src="https://i.imgur.com/PpHTPrc.png">
  </div>
  </slot>
  </template>
@@ -104,28 +104,29 @@
  right: 0;
  }
  &--end {
- opacity: 0.5;
+ display: none;
  }
  }
  &__default-nav {
- width: 32px;
- height: 72px;
+ width: 48px;
+ height: 48px;
+ opacity: 0.88;
+ box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.24);
+ background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
- border-radius: 5px;
- box-shadow: 1px 2px 5px -1px #b0b0b0;
+ border-radius: 50%;
  border-right: 1px solid #eee;
- background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  z-index: 2;
  @media only screen and (max-width: 768px) {
  display: none;
  }
  img {
- width: 32px;
- height: 32px;
+ width: 34px;
+ height: 34px;
  }
  &--left {
  img {

src/cat-carousel.js

@@ -3,7 +3,8 @@ const SWIPE_THRESHOLD = 80
 const INDICATORS_DEFAULT_CONFIG = {
  size: 16,
  color: '#d6d6d6',
- activeColor: '#0095da'
+ activeColor: '#0095da',
+ hideIndicators: false
 }
 
 export default {
@@ -18,10 +19,6 @@ export default {
  type: Number,
  default: 5
  },
- hideIndicators: {
- type: Boolean,
- default: false
- },
  indicatorsConfig: {
  type: Object,
  default: () => {
@@ -45,8 +42,14 @@ export default {
  },
  mounted () {
  this.maxSlide = Math.ceil(this.items.length / this.itemPerPage)
- this.initSlides()
  this.itemWidth = this.carouselItem.length > 0 && this.carouselItem[0].clientWidth
+ this.initSlides()
+ },
+ watch: {
+ items () {
+ this.maxSlide = Math.ceil(this.items.length / this.itemPerPage)
+ this.itemWidth = this.carouselItem.length > 0 && this.carouselItem[0].clientWidth
+ }
  },
  computed: {
  carouselContent () {
@@ -86,6 +89,9 @@ export default {
  return {
  backgroundColor: this.indicatorsConfig.activeColor || INDICATORS_DEFAULT_CONFIG.activeColor
  }
+ },
+ hideIndicators () {
+ return this.indicatorsConfig.hideIndicators || INDICATORS_DEFAULT_CONFIG.hideIndicators
  }
  },
  methods: {
@@ -124,7 +130,6 @@ export default {
  this.touchX = event.touches[0].clientX
  },
  touchMove (event) {
- event.preventDefault()
  if (!this.touchX) return
  let currentX = event.touches[0].clientX
  let diffX = currentX - this.touchX