CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2bootstrap-vue
tesicg
tesicg

Reputation: 4053

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

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.

Upvotes: 2

Views: 2472

Answers (2)

evavargas
evavargas

Reputation: 39

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

Upvotes: 1

Dan
Dan

Reputation: 63059

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.

Upvotes: 1

Related Questions