custom navigation for q-carousel not working

Question

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,
        }
      }
    }

Answer 1

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).