Я пытаюсь создать карусель с вертикальными миниатюрами, но миниатюры дублируются. У меня есть только 2 URL-адреса изображений, но отображается 4 эскиза.
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>
Я хочу отображать только 2 эскиза (по одному для каждого изображения) следующим образом: