Vue轮播无法正确滑动

Question

我正在使用Vue Carousel处理某个产品幻灯片的项目，每张幻灯片中都有图像和文字。我只想在页面上显示5，并且想要导航箭头并拖动它。我什么都做不了。我尽力尝试了以下示例，但是在此插件上可以找到的资源有限。

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>

这是我的小提琴，其行为与我的项目中的行为完全相同。它显示的是可能的幻灯片数量，而不是5。并且无法正确用鼠标拖动。 http://jsfiddle.net/gdw2hn5x/

Answer 1

您的模板语法应为：

<carousel>
  <slide></slide>
  <slide></slide>
  <slide></slide>
  ...
</carousel>

您还有一个额外的<div>包装不需要的幻灯片，这些幻灯片似乎破坏了组件。您可以将v-for直接放在幻灯片标签上。

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>