Topic: Change carousel indicators colors

GuillaumeDgr premium asked 1 year ago


Expected behavior Secondary colors for indicators and controlls Actual behavior White color.

Resources (screenshots, code snippets etc.)

<mdb-carousel
        slide
        indicators
        controlls
        :items="7"
        nav-color="secondary"
        indicators-color="secondary"
      >
        <template v-for="(functionnality, i) in functionnalities" #[i+1]>
          <mdb-row
            :key="i"
            class="align-items-center align-items-center mx-0 my-4"
          >
            <mdb-col col="6">
              <img
                class="img-fluid"
                :src="functionnality.img"
                alt="Fonctionnalité"
              />
            </mdb-col>
            <mdb-col col="4" class="text-left">
              <p class="text-uppercase">
                {{ functionnality.smallTitle }}
              </p>
              <h3 class="h3-responsive" :class="functionnality.class">
                {{ functionnality.title }}
              </h3>
              <p>{{ functionnality.text }}</p>
            </mdb-col>
          </mdb-row>
        </template>
      </mdb-carousel>

enter image description here enter image description here


Mikołaj Smoleński staff commented 1 year ago

The indicatorsColor property should work in this case. Are you sure that you're working with the pro version of carousel component?

Keep coding,  Mikołaj from MDB


GuillaumeDgr premium commented 1 year ago

Hi ! Thanks a lot for your answer. Yes I'm working with mdb vue pro version, but how can I check mdb-carousel is indeed pro version ? Thanks


Mikołaj Smoleński staff commented 1 year ago

One more question. Did you try to use camelCase? I mean changing indicators-color to indicatorsColor?

Keep coding,  Mikołaj from MDB


GuillaumeDgr premium commented 1 year ago

Yes I did. With same results :/ thks


Mikołaj Smoleński staff commented 1 year ago

Hi there, I found a solution. The proper syntax is: indicatorsColor="bg-secondary"

Keep coding,  Mikołaj from MDB


GuillaumeDgr premium commented 1 year ago

Super !! Many thanks, this is indeed working for indicators colors, but not for nav colors / controlls, any idea how to solve this ? thks


Mikołaj Smoleński staff commented 1 year ago

You can make it by changing default icon images to Font Awesome and adding color class, like this:

  <mdb-carousel
    :interval="8000"
    slide
    :items="items"
    indicators
    indicators-color="bg-secondary"
    controlls
    :controll-icons="['fas fa-chevron-left text-secondary', 'fas fa-chevron-right text-secondary']"
  ></mdb-carousel>

Here's a snippet: https://mdbootstrap.com/snippets/vue/mikolaj-smolenski/3023065#html-tab-view

Keep coding,  Mikołaj from MDB



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.7.2
  • Device: Mac book pro
  • Browser: Firefox developers
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No