javascript - How to customize controls and indicators in BootstrapVue's Carousel component?

Question

The code looks as following:

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

The screenshot of component with HTML:

For example I would like to make arrow bigger and of different color and have circles instead of short lines.

I've tried a lot of things, but I don't understand how to find and change Bootstrap's classes through Vue.js' style mechanism.

Answer 1

Your <style> tag has the module attribute for CSS Modules but this is probably blocking whatever styles you are trying to apply to the carousel, so remove that first if it's not intentional.

To adjust the size of the chevron controls, use height and width on the icon classes:

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

Color is trickier because the chevron is actually a background-image SVG (which is why height/width are necessary rather than font-size, for example). For those, do the following:

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

Change the fill attribute hex value as desired.