Merge pull request #2 from SchnapsterDog/develop

fix: replace itemWidth with width prop, updated certain props type

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-marquee-slider",
   "description": "Simple and easy-to-use component for Vue that allows you to create customizable marquees with just a few lines of code",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "author": {
     "name": "Oliver Trajceski",

src/components/MarqueeSlider.vue

@@ -7,7 +7,7 @@
 </template>
 <script>
 export default {
-	name: 'VueMarqueeSlider',
+	name: 'MarqueeSlider',
 	props: {
 		autoWidth: {
 			type: Boolean,
@@ -16,16 +16,10 @@ export default {
 			}
 		},
 		id: {
-			type: [Number, String],
+			type: String,
       required: true,
       default: () => {
-        return 'id'
-      }
-    },
-    itemWidth: {
-			type: Number,
-			default: () => {
-				return 200
+				return 'id'
 			}
 		},
 		paused: {
@@ -53,10 +47,16 @@ export default {
 			}
 		},
 		speed: {
-			type: [Number, String],
+			type: Number,
 			default: () => {
 				return 1500
 			}
+		},
+		width: {
+			type: Number,
+			default: () => {
+				return 100
+			}
 		}
 	},
 	data() {
@@ -121,7 +121,7 @@ export default {
 			this.items[index].style.marginRight = `${this.space}px`
 		},
 		setItemWidth(index) {
-			this.items[index].style.minWidth = `${this.itemWidth}px`
+			this.items[index].style.minWidth = `${this.width}px`
 		},
 		setImageObjectFit(index) {
 			this.items[index].style.objectFit = 'contain'
@@ -133,13 +133,13 @@ export default {
 			if (this.autoWidth) {
 				this.container.style.width = `${this.itemsLength * (this.containerWidth / this.itemsLength + this.space)}px`
 			} else {
-				this.container.style.width = `${this.itemsLength * (this.itemWidth + this.space)}px`
+				this.container.style.width = `${this.itemsLength * (this.width + this.space)}px`
 			}
 		}
 	}
 }
 </script>
-<style module scoped>
+<style module>
 .marqueeSlider {
 	overflow: hidden;
 }