Vue Carousel not sliding correctly - vue.js

Question

I am working on a project using Vue Carousel for some product slides with images and text in each slide. I only want 5 to show up on a page and I want the nav arrows and I want it to drag. I can't get any of that stuff working. I tried following the examples as best as I can, but there is limited resources that I can find on this plugin.
new Vue({
el: "#app",
components: {
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
},
props: {
numSlides: {
type: Number,
default: 5
},
itemsPerPageCssStyle: {
type: String,
default: "slider5buckets"
}
},
data: function () {
return {
products: [
{id: 1, img: 'https://placeimg.com/100/100'},
{id: 2, img: 'https://placeimg.com/101/101'},
{id: 3, img: 'https://placeimg.com/102/102'},
{id: 4, img: 'https://placeimg.com/103/103'},
{id: 5, img: 'https://placeimg.com/104/104'},
{id: 6, img: 'https://placeimg.com/105/105'},
{id: 7, img: 'https://placeimg.com/106/106'},
{id: 8, img: 'https://placeimg.com/107/107'},
{id: 9, img: 'https://placeimg.com/108/108'},
{id: 10, img: 'https://placeimg.com/109/109'},
{id: 11, img: 'https://placeimg.com/110/110'},
{id: 12, img: 'https://placeimg.com/111/111'},
{id: 13, img: 'https://placeimg.com/112/112'},
]
}
}
})
.VueCarousel-slide {
height: 350px;
text-align: center;
}
.VueCarousel-slide .img-container {
height: 130px;
width: 100%;
float: left;
}
.VueCarousel-slide img {
margin: 0 auto;
}
.VueCarousel-slide h3 {
height: 180px;
}
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>
<div id="app">
<div
:class="['imageSliderContainer', itemsPerPageCssStyle]"
style="width:100%;height:374px;">
<div
class="wrapper"
style="height:355px;margin-left:15px;padding-right:4px;z-index:1;overflow: hidden;">
<div class="carousel-view">
<carousel
:per-page="5"
:navigation-enabled="true"
:min-swipe-distance="1">
<div
v-for="product in products"
:key="product.id">
<slide>
<div class="img-container">
<img
:src="product.img"
:alt="'Product #' + product.id">
</div>
<h3>Product #{{ product.id }}</h3>
<a
href="#"
tabindex="0"
name="instantadd">
<div class="btn_CA_Search buttonSearch gradient"> Add to Cart</div>
</a>
</slide>
</div>
</carousel>
</div>
</div>
</div>
</div>
Here is my Fiddle that is behaving exactly like it is behaving in my project. It is showing as many slides as it can fit, not 5. And it won't drag with the mouse correctly.
http://jsfiddle.net/gdw2hn5x/

Answer 1

Your template syntax should be:
<carousel>
<slide></slide>
<slide></slide>
<slide></slide>
...
</carousel>
You have an extra <div> wrapping the slides which you don't need and seems to break the component. You can put the v-for directly on the slide tag.
new Vue({
el: "#app",
components: {
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
},
props: {
numSlides: {
type: Number,
default: 5
},
itemsPerPageCssStyle: {
type: String,
default: "slider5buckets"
}
},
data: function () {
return {
products: [
{id: 1, img: 'https://placeimg.com/100/100'},
{id: 2, img: 'https://placeimg.com/101/101'},
{id: 3, img: 'https://placeimg.com/102/102'},
{id: 4, img: 'https://placeimg.com/103/103'},
{id: 5, img: 'https://placeimg.com/104/104'},
{id: 6, img: 'https://placeimg.com/105/105'},
{id: 7, img: 'https://placeimg.com/106/106'},
{id: 8, img: 'https://placeimg.com/107/107'},
{id: 9, img: 'https://placeimg.com/108/108'},
{id: 10, img: 'https://placeimg.com/109/109'},
{id: 11, img: 'https://placeimg.com/110/110'},
{id: 12, img: 'https://placeimg.com/111/111'},
{id: 13, img: 'https://placeimg.com/112/112'},
]
}
}
})
.VueCarousel-slide {
height: 350px;
text-align: center;
}
.VueCarousel-slide .img-container {
height: 130px;
width: 100%;
float: left;
}
.VueCarousel-slide img {
margin: 0 auto;
}
.VueCarousel-slide h3 {
height: 180px;
}
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>
<div id="app">
<div
:class="['imageSliderContainer', itemsPerPageCssStyle]"
style="width:100%;height:374px;">
<div
class="wrapper"
style="height:355px;margin-left:15px;padding-right:4px;z-index:1;overflow: hidden;">
<div class="carousel-view">
<carousel
:per-page="5"
:navigation-enabled="true"
:min-swipe-distance="1">
<!-- don't wrap with div here -->
<!-- just v-for on slide -->
<slide
v-for="product in products"
:key="product.id"
>
<div class="img-container">
<img
:src="product.img"
:alt="'Product #' + product.id">
</div>
<h3>Product #{{ product.id }}</h3>
<a
href="#"
tabindex="0"
name="instantadd">
<div class="btn_CA_Search buttonSearch gradient"> Add to Cart</div>
</a>
</slide>
</carousel>
</div>
</div>
</div>
</div>