Vue-strap Carousel：如何选择特定幻灯片答案

【问题标题】：Vue-strap Carousel: How to select specific slideVue-strap Carousel：如何选择特定幻灯片
【发布时间】：2017-06-30 16:26:30
【问题描述】：

我已经设法使用 Vue-strap 轮播组件创建了一个轮播（滑块），代码如下：

<carousel>
        <slider  v-for="(photo,index) in photos"  :key="photo.sequenceID" >
            <img v-bind:src="'https://../photo/' + photo.photoFilename " >
        </slider>
</carousel>

轮播正在运行。我还在页面上显示图像的缩略图。我想在单击缩略图时选择特定幻灯片。

如何在轮播中显示特定幻灯片？如果我传递幻灯片编号，Vue-strap 轮播或滑块中是否有可以显示特定幻灯片的功能？

【问题讨论】：

没有内置支持。 github.com/yuche/vue-strap/blob/master/src/Carousel.vue
我看到有一个方法indicatorClick，用于在点击指示器点时选择特定的幻灯片。 ` 方法： { indicatorClick(index) { if (this.isAnimating || this.index === index) return false this.isAnimating = true this.index = index },` 我是 Vue 和 Vue-strap 的新手。如果我的轮播元素的 id 为“car”，您能否建议如何调用 indicatorClick() 方法？

标签： vue.js vue-strap

【解决方案1】：

以下代码将显示图片ID 的幻灯片。它使用轮播组件的 indicatorClick() 方法。这里 vm 是 Vue 对象名称。

vm.$children[0].indicatorClick(pictureID);

【讨论】：

您可能需要根据 Vue 对象中的组件更改 $children[0]。

【解决方案2】：

迟到的回复：

您可以按如下方式使用navigateTo 属性： template.vue > 模板/过渡

<carousel
  :perPage="1"
  :navigateTo="carouselPosition"
  :navigationEnabled="true"
  :paginationEnabled="false">
  <slide>
    ...
  </slide>
</carousel>

carouselPosition 应存储为道具： template.vue > 导出默认{}

data () {
  return {
    carouselPosition: null // OR 1
  }
}

在缩略图元素中包含以下内容： template.vue > 组件缩略图

v-on:click=";(carouselPosition = index)"

在这种情况下，index 值将在循环中生成： template.vue > 组件循环

v-for="(thumbnail, index) in yourData"

注意：Nuxtjs 在此示例中使用，但应该很容易根据您的需要修改这些示例。

【讨论】：

【解决方案3】：

使用`v-model`

见Carousel documentation；

通过 v-model（绑定到 value 属性）以编程方式控制显示哪张幻灯片。请注意，幻灯片的索引从 0 开始

<b-carousel
  id="image-carousel"
  controls
  indicators
  img-width="1024"
  img-height="480"
  v-model="currentSlide"
>

在我的幻灯片中，我为每个缩略图使用img。单击时currentSlide 更改为缩略图的索引。

<img
  v-on:click="showImage(index)"
/>

在数据中存储currentSlide：

data() {
  return {
    currentSlide: 0
  }
}

更改currentSlide的方法

showImage (index) {
  this.currentSlide = index;
}

如果 v-model 引用发生变化，Vue 将更新滑块的 value 属性。

【讨论】：

【解决方案4】：

使用v-bind:data-slide-to="index"

<ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" 
                 v-for="(image, index) in images" v-bind:key="index"
                 v-bind:data-slide-to="index"
                :class="{'active' : index===0}"></li>
</ol>

【讨论】：

使用v-model

使用`v-model`