Buefy Carousel Thumbnail Indicator show duplicated image (Vuejs) - vue.js

Question

I'm trying to create a carousel with vertical thumbnails, but the thumbnails are being duplicated. I only have 2 image URLs, but it's showing 4 thumbnails.
App.vue:
<template>
<div id="app">
<b-carousel
:indicator-inside="false"
class="is-hidden-mobile"
:pause-hover="false"
:pause-info="false"
>
<b-carousel-item v-for="(item, i) in imagess" :key="i">
<figure class="image">
<img :src="item.url">
</figure>
</b-carousel-item>
<span v-if="gallery" #click="switchGallery(false)" class="modal-close is-large"/>
<template slot="indicators" slot-scope="props">
<span class="al image">
<img v-for="(p,index) in imagess" :key="index" :src="p.url" :title="props.i">
</span>
</template>
</b-carousel>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
bundledatas: null,
imagess: [
{
url:
"https://specials-images.forbesimg.com/imageserve/37645633/960x0.jpg?cropX1=445&cropX2=3910&cropY1=258&cropY2=2207"
},
{
url:
"https://www.sovereigngroup.com/wp-content/uploads/2018/12/HK-4.jpg"
}
]
};
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.is-active .al img {
filter: grayscale(0%);
}
.al img {
filter: grayscale(100%);
margin: 2px 0;
}
.carousel {
display: grid;
grid-template-columns: auto 25%;
align-items: center;
}
.carousel-indicator {
flex-direction: column;
}
.indicator-item {
margin-right: initial !important;
}
</style>
demo
I only want to display 2 thumbnails for (one for each image) like this:

Answer 1

The problem is your indicators slot is displaying all items of imagess when it should only be displaying the one specified in props.i, which is the current index shown in the carousel.
The solution is to lookup the item in imagess by the index in props.i, and set the img's source URL accordingly:
<template slot="indicators" slot-scope="props">
<span class="al image">
<!-- BEFORE: -->
<!-- <img v-for="(p,index) in imagess" :key="index" :src="p.url" :title="props.i"> -->
<img :src="imagess[props.i].url">
</span>
</template>
updated codesandbox