Buefy vertical thumbnails carousel? - vue.js

Question

When I use the b-carousel tag, it's working but the thumbnails are horizontal. How do I make them vertical?
This is the code:
<template>
<b-carousel :indicator-inside="false">
<b-carousel-item v-for="(item, i) in 6" :key="i">
<span class="image">
<img :src="getImgUrl(i)">
</span>
</b-carousel-item>
<template slot="indicators" slot-scope="props">
<span class="al image">
<img :src="getImgUrl(props.i)" :title="props.i">
</span>
</template>
</b-carousel>
</template>
<script>
export default {
methods: {
getImgUrl(value) {
return `https://picsum.photos/id/43${value}/1230/500`
}
}
}
</script>
<style>
.is-active .al img {
filter: grayscale(0%);
}
.al img {
filter: grayscale(100%);
}
</style>
OUTPUT THAT I WANT:

Answer 1

Note: This solution has a disadvantage in that it relies on the CSS implementation details of b-carousel, but that might be acceptable for your use case:
You could use CSS to style the b-carousel elements:
.carousel - the root container
.carousel-indicator - the thumbnail container (a flex item)
.indicator-item - each thumbnail item
Two columns
Grid Layout could be most helpful in this case, as we essentially want a 2-column grid. This is done by applying display: grid to the root container, and grid-template-columns: auto 25% to create the main-image column and the thumbnail column:
.carousel {
display: grid;
grid-template-columns: auto 25%;
align-items: center;
}
Vertical thumbnails
Flexbox applies here. The thumbnail container is already using it, but it uses the default flex-flow of row (horizontal). We could easily change that to column to make it vertical:
.carousel-indicator {
flex-direction: column;
}
Thumbnail margins
The thumbnails have a margin-right between elements, intended to provide visual space between the horizontal images. Since we're switching it to a vertical layout, we can remove the margin:
.indicator-item {
margin-right: initial !important;
}