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

Posted 2023-03-05

【中文标题】如何在 BootstrapVue 的 Carousel 组件中自定义控件和指示器？

【英文标题】：How to customize controls and indicators in BootstrapVue's Carousel component?

【发布时间】：2021-04-16 12:40:08

【问题描述】：

代码如下：

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

【问题讨论】：

***.com/questions/46249541/… Bootstrap Vue 使用 Bootstrap 样式，所以这些答案就是你想要的

我看过了，但是怎么写呢？我已经像他们一样尝试过，但没有成功。

可能是<style> 标签的module 属性为您阻止了它

【参考方案1】：

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

【参考方案2】：

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