2

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:

enter image description here

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.

Dan
  • 59,490
  • 13
  • 101
  • 110
tesicg
  • 3,971
  • 16
  • 62
  • 121
  • https://stackoverflow.com/questions/46249541/change-arrow-colors-in-bootstraps-carousel Bootstrap Vue uses Bootstrap styles so these answers are what you want – Dan Jan 11 '21 at 15:25
  • I've looked at it, but how to write it? I've tried as they did, but it didn't work. – tesicg Jan 11 '21 at 16:02
  • 1
    It could be the ` – Dan Jan 11 '21 at 16:53

2 Answers2

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.

Dan
  • 59,490
  • 13
  • 101
  • 110
1

Using the approach of Dan, I used this for styling the indicators:

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

Saw in https://github.com/bootstrap-vue/bootstrap-vue/discussions/6264

evavargas
  • 39
  • 3