Buefy вертикальная карусель миниатюр?

Question

Когда я использую b-carouselтег, он работает, но эскизы горизонтальные. Как сделать их вертикальными?

Это код:

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

ВЫХОД, КОТОРЫЙ Я ХОЧУ:

https://i.stack.imgur.com/JF77A.png

Answer 1

Примечание. Недостатком этого решения является то, что оно основано на деталях реализации CSS дляb-carousel, но это может быть приемлемо для вашего варианта использования:

Вы можете использовать CSS для стилизации b-carousel элементы:

• .carousel - корневой контейнер
• .carousel-indicator - контейнер эскизов (a flex пункт)
• .indicator-item - каждый элемент эскиза

Две колонки

Макет сетки может быть наиболее полезным в этом случае, так как мы, по сути, хотим сетку из 2 столбцов. Это делается путем применения display: grid в корневой контейнер и grid-template-columns: auto 25% для создания столбца основного изображения и столбца эскизов:

.carousel {
  display: grid;
  grid-template-columns: auto 25%;
  align-items: center;
}

Вертикальные миниатюры

Здесь применяется Flexbox. Контейнер эскизов уже использует его, но по умолчанию flex-flow из row(по горизонтали). Мы могли бы легко изменить это наcolumn чтобы сделать его вертикальным:

.carousel-indicator {
  flex-direction: column;
}

Поля эскизов

На эскизах есть margin-right между элементами, предназначенная для обеспечения визуального пространства между горизонтальными изображениями. Поскольку мы переключаем его на вертикальный макет, мы можем удалить поле:

.indicator-item {
  margin-right: initial !important;
}