2

我已经设法使用带有以下代码的 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 轮播或滑块中是否有可以显示特定幻灯片的功能？

4

4 回答 4

1

迟回复：

您可以navigateTo按如下方式使用该道具： template.vue > tamplate/transition

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

carouselPosition应该存储为一个道具： template.vue > export default {}

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

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

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

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

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

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

于 2018-11-27T11:12:36.180 回答
1

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

vm.$children[0].indicatorClick(pictureID);
于 2017-06-30T17:23:17.473 回答
1

使用v-model

请参阅轮播文档；

通过 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 属性。

于 2019-03-11T13:34:36.517 回答
0

利用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>
于 2020-04-15T19:08:10.283 回答