Change carousel indicators colors

Topic: Change carousel indicators colors

GuillaumeDgr premium asked 3 years 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

Mikołaj Smoleński staff commented 3 years 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 3 years 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 3 years 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 3 years ago

Yes I did. With same results :/ thks

Mikołaj Smoleński staff commented 3 years ago

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

Keep coding, Mikołaj from MDB

GuillaumeDgr premium commented 3 years 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 3 years 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. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

GuillaumeDgr

Premium support 205Support score
30Questions 6Answers 0Snippets