是否可以在 Carousel 组件（BootstrapVue）的每个 b-carousel-slide 中使用 b-card？

Question

我尝试了以下方法，但除了箭头之外什么都没有显示：

<template lang="pug">
b-carousel(
  id='categoryRoulette'
  controls
  no-animation
  :interval='0'
)
  b-carousel-slide
    b-card(
      img-src='https://licota.ru/system/product_category_images/attachments/55b9/ea79/7372/7609/da00/0000/home/a87c8365-bf1f-11df-a726-0015175303fd.png?1438247544'
      img-alt='Image1'
      img-top=''
      tag='article'
    )
      b-card-text.centerText
        h5
          a(href="#") Text1
  b-carousel-slide
    b-card(
      img-src='https://licota.ru/system/product_category_images/attachments/55b6/8675/7372/7679/ac00/0000/home/a87c8368-bf1f-11df-a726-0015175303fd.png?1438025333'
      img-alt='Image2'
      img-top=''
      tag='article'
    )
      b-card-text.centerText
        h5
          a(href="#") Text2
  b-carousel-slide
    b-card(
      img-src='https://licota.ru/system/product_category_images/attachments/55b6/7bf6/7372/762b/cb00/0000/home/49143ab4-7b92-11e4-80f3-002590d99cf6.png?1438022646'
      img-alt='Image3'
      img-top=''
      tag='article'
    )
      b-card-text.centerText
        h5
          a(href="#") Text3
  b-carousel-slide
    b-card(
      img-src='https://licota.ru/system/product_category_images/attachments/55b6/7c0a/7372/762b/cb00/002a/home/a87c8369-bf1f-11df-a726-0015175303fd.jpeg?1438022665'
      img-alt='Image4'
      img-top=''
      tag='article'
    )
      b-card-text.centerText
        h5
          a(href="#") Text4
</template>

<script lang="ts">
import testData from '../data/testData.json';
import { RouletteData } from '../types/roulette'
import { Category } from '../types'
import Vue from 'vue'

export default Vue.extend({
  data: (): RouletteData => ({
    slide: 0,
    sliding: false,
    catalog: [],
  }),
  mounted(): void {
    this.catalog = testData.catalog
  },
  methods: {
    onSlideStart() : void {
      this.sliding = true
    },
    onSlideEnd() : void {
      this.sliding = false
    },
  },
})
</script>

<style lang="sass">
#categoryRoulette
  margin-bottom: 40px
  margin-top: 40px
  .carousel-caption
    color: black
  .carousel-control-prev-icon
    margin-left: -200px
  .carousel-control-next-icon
    margin-right: -200px
  .carousel-control-next-icon::after
    color: rgb(0, 70, 140)
    content: '>'
    font-size: 55px
  .carousel-control-prev-icon::after
    color: rgb(0, 70, 140)
    content: '<'
    font-size: 55px
.centerText
  align-items: center
  display: flex
  justify-content: center
</style>

Answer 1

由于您的轮播幻灯片没有直接图像（您将图像放在<b-card> 中），除非您执行某些操作，否则幻灯片将折叠。第一个选项是设置img-blank 属性。轮播中的第一个示例docs 就是这样做的，并且有一条评论：

幻灯片与空白流体图像保持幻灯片纵横比

像这样使用它：

<b-carousel-slide img-blank>

或者如果你想直接修改CSS，你可以在.carousel-item类中设置一个高度：

.carousel-item {
  height: 300px;
}

此外，您应该为幻灯片使用v-for，而不是对其进行硬编码：

<b-carousel
  id='categoryRoulette'
  controls
  no-animation
  :interval='0'
>
  <b-carousel-slide v-for="(slide, index) in slides" img-blank :key="index">
    <b-card
      :img-src="slide.image"
      img-alt="Image1"
      img-top=""
      tag="article"
    >
    ...
    </b-card>
  <b-carousel-slide>
</b-carousel>

slides: [
  { image: 'https://licota.ru/system/product_category_images/attachments/55b9/ea79/7372/7609/da00/0000/home/a87c8365-bf1f-11df-a726-0015175303fd.png?1438247544'},
  { image: 'https://licota.ru/system/product_category_images/attachments/55b6/8675/7372/7679/ac00/0000/home/a87c8368-bf1f-11df-a726-0015175303fd.png?1438025333'},
  { image: 'https://licota.ru/system/product_category_images/attachments/55b6/7bf6/7372/762b/cb00/0000/home/49143ab4-7b92-11e4-80f3-002590d99cf6.png?1438022646'},
  { image: 'https://licota.ru/system/product_category_images/attachments/55b6/7c0a/7372/762b/cb00/002a/home/a87c8369-bf1f-11df-a726-0015175303fd.jpeg?1438022665'},
]