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

Когда я использую тег 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>

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

введите здесь описание изображения


vue.js vuejs3 vuejs2 buefy
person TechDev    schedule 06.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

Две колонки

В этом случае может оказаться наиболее полезным Grid Layout, поскольку мы, по сути, хотим сетку из 2 столбцов. Это делается путем применения _ 7_ в корневой контейнер и _ 8_, чтобы создать столбец основного изображения и столбец эскизов:

.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;
}

Редактировать вертикальные миниатюры в b-карусели

person tony19    schedule 10.06.2020
comment
Могу ли я спросить, могу ли я назвать URL-адрес вместо индекса? если я не поместил URL-адрес в метод, а URL-адрес находится в переменной, как я могу вызвать его в индикаторе слота шаблона? - person TechDev; 16.06.2020
comment
Могу ли я спросить, могу ли я назвать URL-адрес вместо индекса? если я не поместил URL-адрес в метод, а URL-адрес находится в переменной, как я могу вызвать его в индикаторе слота шаблона? - person TechDev; 18.06.2020