javascript - 如何在BootstrapVue的Carousel组件中自定义控件和指示器？

Question

代码如下:

<template>
  <div>
    <b-carousel
      id="carousel-upper"
      v-model="slide"
      :interval="3000"
      fade
      controls
      indicators
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <b-carousel-slide
        img-src="https://licota.ru/system/sliders/attachments/55ba/10cf/7372/763c/8600/0002/full/banner-2.jpg?1438257358"
      ></b-carousel-slide>
      <b-carousel-slide
        img-src="https://licota.ru/system/sliders/attachments/55ba/10cf/7372/763c/8600/0003/full/banner-3.jpg?1438257359"
      ></b-carousel-slide>
      <b-carousel-slide
        img-src="https://licota.ru/system/sliders/attachments/55ba/10ce/7372/763c/8600/0001/full/banner-1.jpg?1438257358"
      ></b-carousel-slide>
      <b-carousel-slide
        img-src="https://licota.ru/system/sliders/attachments/55ba/10ce/7372/763c/8600/0000/full/banner-0.jpg?1438257357"
      ></b-carousel-slide>
    </b-carousel>
  </div>
</template>

<script lang="ts">
import { CarouselData } from '../types/carousel'
import Vue from 'vue'

export default Vue.extend({
  data: (): CarouselData => {
    return {
      slide: 0,
      sliding: false
    }
  },
  methods: {
    onSlideStart(slide: number) : void {
      this.sliding = true
    },
    onSlideEnd(slide: number) : void {
      this.sliding = false
    }
  }
})
</script>

<style lang="sass" module>
  ?
</style>

HTML组件截图:

例如，我想让箭头更大、颜色不同，并且用圆圈而不是短线。

我尝试了很多东西，但我不明白如何通过Vue.js的样式机制查找和更改Bootstrap的类。

Answer 1

您的<style>标签有 module CSS Modules 的属性但这可能会阻止您尝试应用于轮播的任何样式，因此如果不是故意的，请先将其删除。

要调整 V 形控件的大小，请使用 height和width关于图标类:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px !important;
  width: 100px !important;
}

颜色比较棘手，因为 V 形实际上是 background-image SVG(例如，这就是为什么需要高度/宽度而不是 font-size )。对于这些，请执行以下操作:

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

更改 fill根据需要属性十六进制值。