title: custom navigation for q-carousel not working
body: <p>I am struggling solving my navigation q-carousel that I want, it is does not work.</p>
  <p>It just shows default navigation only but not the custom one that I grab the code from the Quasar website.</p>
  <p>My template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;q-card-section class=&quot;q-pa-none&quot; &gt;
  
                 
  
              &lt;div style=&quot;width:60%; padding-bottom: 250px&quot;
              class=&quot;bg-transparent text-center q-gutter-y-lg absolute-center &quot;&gt;
            &lt;q-carousel
              animated
              v-model=&quot;slide&quot;
              arrows
              navigation
              infinite
              control-type=&quot;flat&quot;
              control-color=&quot;secondary&quot;
              class=&quot;bg-transparent text-center&quot;&gt;
             &gt;
                  &lt;template v-slot:navigation-icon=&quot;{ active, btnProps, onClick }&quot;&gt;
          &lt;q-btn v-if=&quot;active&quot; size=&quot;lg&quot; icon=&quot;home&quot; color=&quot;yellow&quot; flat round dense @click=&quot;onClick&quot; /&gt;
          &lt;q-btn v-else size=&quot;sm&quot; :icon=&quot;btnProps.icon&quot; color=&quot;white&quot; flat round dense @click=&quot;onClick&quot; /&gt;
        &lt;/template&gt;
  
  
  
              &lt;q-carousel-slide :name=&quot;1&quot; &gt;1&lt;/q-carousel-slide&gt;
              &lt;q-carousel-slide :name=&quot;2&quot;&gt;2&lt;/q-carousel-slide&gt;
              &lt;q-carousel-slide :name=&quot;3&quot;&gt;3&lt;/q-carousel-slide&gt;
  
            &lt;/q-carousel&gt;
  
          &lt;/q-card-section&gt;
  </code></pre>
  <p>My script:</p>
  <pre class="lang-js prettyprint-override"><code>    export default {
          data() {
              return {
                slide : 1,
          }
        }
      }
  </code></pre>