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

Question

我设法使用带有以下代码的Vue-strap轮播组件创建旋转木马（滑块）：

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

Carousel正在运作。我还在页面上显示图像的缩略图。我想在点击缩略图时选择特定的幻灯片。

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

Answer 1

以下代码将显示pictureID的幻灯片。它使用carousel组件的indicatorClick（）方法。这里vm是Vue对象名。

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

Answer 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，但应根据您的需要轻松修改这些示例。

Answer 3

使用v-model

请参见Carousel documentation;

  

以编程方式通过v模型（绑定到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。

Answer 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>