Vue-strap Carousel:如何选择特定幻灯片

Question

我已经设法使用Vue-strap carousel组件创建了一个carousel (滑块)，代码如下：

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

旋转木马工作正常。我还在页面上显示图像的缩略图。我想在单击缩略图时选择特定的幻灯片。

如何在carousle中显示特定的幻灯片？Vue-strap carousle或slider中有没有一个函数可以在我传递幻灯片编号时显示特定的幻灯片？

Answer 1

下面的代码将显示pictureID的幻灯片。它使用carousel组件的indicatorClick()方法。其中，vm是Vue对象的名称。

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

Answer 2

延迟回复：

您可以按如下方式使用navigateTo属性: template.vue > tamplate/transition

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

默认导出应该存储为属性: template.vue > carouselPosition {}

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

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

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

在本例中，组件值将在循环中生成: template.vue > index循环

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

注意:本例中使用了Nuxtjs，但根据需要修改这些示例应该很容易。

Answer 3

使用v-model

参见Carousel documentation；

通过v-model (绑定到值prop)以编程方式控制正在显示的幻灯片。请注意，幻灯片的索引从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模型引用发生变化，Vue将更新滑块的值prop。