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

问题描述

代码如下：

<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 的类。

解决方法

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

要调整 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 属性的十六进制值。

,

使用 Dan 的方法，我用它来设计指标的样式：

.carousel-indicators li {
      border-color: #e100ff;
      border-width: 12px;
      border-style: none solid none solid;
      background-color: #e100ff;
      height: 2px;
      margin: 0 16px;
      opacity: 1;
      padding: 1px;
      position: relative;
    }
    .carousel-indicators li::after {
      bottom: -7px;
      content: none;
      left: -7px;
      padding: 1px;
      position: absolute;
      right: -7px;
      top: -7px;
    }
    .carousel-indicators li.active {
      background-color: #7f00ff;
      border-color: #7f00ff;
      border-width: 12px;
      border-style: none solid none solid;
    }

看到https://github.com/bootstrap-vue/bootstrap-vue/discussions/6264