custom navigation for q-carousel not working

I am struggling solving my navigation q-carousel that I want, it is does not work.

It just shows default navigation only but not the custom one that I grab the code from the Quasar website.

My template:

<q-card-section class="q-pa-none" >

               

            <div style="width:60%; padding-bottom: 250px"
            class="bg-transparent text-center q-gutter-y-lg absolute-center ">
          <q-carousel
            animated
            v-model="slide"
            arrows
            navigation
            infinite
            control-type="flat"
            control-color="secondary"
            class="bg-transparent text-center">
           >
                <template v-slot:navigation-icon="{ active, btnProps, onClick }">
        <q-btn v-if="active" size="lg" icon="home" color="yellow" flat round dense @click="onClick" />
        <q-btn v-else size="sm" :icon="btnProps.icon" color="white" flat round dense @click="onClick" />
      </template>



            <q-carousel-slide :name="1" >1</q-carousel-slide>
            <q-carousel-slide :name="2">2</q-carousel-slide>
            <q-carousel-slide :name="3">3</q-carousel-slide>

          </q-carousel>

        </q-card-section>

My script:

    export default {
        data() {
            return {
              slide : 1,
        }
      }
    }

1 answer

  • answered 2022-04-09 16:43 David Wolf

    Your code is actually working, but you kind of mixed opening and closing tags.

    1. There is no open tag for </q-card-section>
    2. There is no closing tag for your leading <div>

    The below code should work for you:

        <div
          style="width: 60%; padding-bottom: 250px"
          class="bg-transparent text-center q-gutter-y-lg absolute-center"
        >
          <q-carousel
            animated
            v-model="slide"
            arrows
            navigation
            infinite
            control-type="flat"
            control-color="secondary"
            class="bg-transparent text-center"
          >
            <template v-slot:navigation-icon="{ active, btnProps, onClick }">
              <q-btn
                v-if="active"
                size="lg"
                icon="home"
                color="yellow"
                flat
                round
                dense
                @click="onClick"
              />
              <q-btn
                v-else
                size="sm"
                :icon="btnProps.icon"
                color="white"
                flat
                round
                dense
                @click="onClick"
              />
            </template>
    
            <q-carousel-slide :name="1">1</q-carousel-slide>
            <q-carousel-slide :name="2">2</q-carousel-slide>
            <q-carousel-slide :name="3">3</q-carousel-slide>
          </q-carousel>
        </div>
    

    You should consider setting up auto formatting in your code editor/IDE to auto format your source code, if you are using VS Code you can do this quite easily: https://stackoverflow.com/a/29973358/13765033

    This way, you shouldn't run into such trouble again (it also helps Stack Overflow users to read your source code).

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum