title: Vue Carousel not sliding correctly
body: <p>I am working on a project using <a href="https://ssense.github.io/vue-carousel/" rel="nofollow noreferrer">Vue Carousel</a> 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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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'},
        ]
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;div
      :class="['imageSliderContainer', itemsPerPageCssStyle]"
      style="width:100%;height:374px;"&gt;
      &lt;div
        class="wrapper"
        style="height:355px;margin-left:15px;padding-right:4px;z-index:1;overflow: hidden;"&gt;
        &lt;div class="carousel-view"&gt;
          &lt;carousel
            :per-page="5"
            :navigation-enabled="true"
            :min-swipe-distance="1"&gt;
            &lt;div
              v-for="product in products"
              :key="product.id"&gt;
              &lt;slide&gt;
                &lt;div class="img-container"&gt;
                  &lt;img
                    :src="product.img"
                    :alt="'Product #' + product.id"&gt;
                &lt;/div&gt;
                &lt;h3&gt;Product #{{ product.id }}&lt;/h3&gt;
                &lt;a
                  href="#"
                  tabindex="0"
                  name="instantadd"&gt;
                  &lt;div class="btn_CA_Search buttonSearch gradient"&gt; Add to Cart&lt;/div&gt;
                &lt;/a&gt;
              &lt;/slide&gt;
            &lt;/div&gt;
          &lt;/carousel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.
  <a href="http://jsfiddle.net/gdw2hn5x/" rel="nofollow noreferrer">http://jsfiddle.net/gdw2hn5x/</a></p>