carousel thumbnail not showing?

[jeimz173]

Hello friends,

newbie here

i am trying to add some carousel to my project with a thumbnails. So basically i followed the instructions to the documents but fails me to display the thumbnail… can anyone help me? thank you!

here is my code snippet

        <q-card>
          <q-card-media >
<q-carousel
  color="white"
  arrows
  height="300px"
  :thumbnails="[
    'statics/red-handbag-with-gold-detail_925x.jpg',
    'statics/red-handbag-with-gold-detail_925x.jpg',
    'statics/red-handbag-with-gold-detail_925x.jpg',
    'statics/red-handbag-with-gold-detail_925x.jpg',
    'statics/red-handbag-with-gold-detail_925x.jpg',
    'statics/red-handbag-with-gold-detail_925x.jpg'
  ]"
  thumbnails-horizontal
  class="q-ma-md"
>
<q-carousel-slide img-src="statics/red-handbag-with-gold-detail_925x.jpg" />
<q-carousel-slide img-src="statics/red-handbag-with-gold-detail_925x.jpg" />
<q-carousel-slide img-src="statics/red-handbag-with-gold-detail_925x.jpg" />
<q-carousel-slide img-src="statics/red-handbag-with-gold-detail_925x.jpg" />
<q-carousel-slide img-src="statics/red-handbag-with-gold-detail_925x.jpg" />
<q-carousel-slide img-src="statics/red-handbag-with-gold-detail_925x.jpg" />
</q-carousel>
          </q-card-media>
          <q-card-main>

          </q-card-main>
        </q-card>

and here is the output:

but my expectation output is:

please help me thank you!

[genyded]

Press F12 while in your browser, go to the Console tab, see what errors are there, use them to fix your code.

[jeimz173]

@genyded well i dont see any reddish errors to my console

[genyded]

Well… it looks like you are displaying the same image (red handbag with gold detail) for all the slides, so I am not clear on how you would expect to get different images like you display in your expected output. If you have the correct images in your statics folder and are referencing them correctly, I can see no reason why it should not work except that maybe the thumbnails-horizontal value needs to be bound to a true or false.

[jeimz173]

@genyded well im on a test mode thats why i used the same image for all the slides and i dont think that is the reason why i can’t get my expectation, now i tried to use different images but still, i cant display the thumbnail icon button and the thumbnails below the carousel. And even if i bound to true or false , the thumbnails-horizontal still display the same result.

here is my new code

<q-carousel
              color="white"
              arrows
              height="300px"
              :thumbnails="[
                'statics/red-handbag-with-gold-detail_925x.jpg',
                'statics/blank-colored-t-shirts_925x.jpg',
                'statics/sarah_retail_owner_woman_portrait_925x.jpg'
              ]"
              thumbnails-horizontal="true"
              class="q-ma-xs"
            >
            <q-carousel-slide img-src="statics/red-handbag-with-gold-detail_925x.jpg" />
            <q-carousel-slide img-src="statics/blank-colored-t-shirts_925x.jpg" />
            <q-carousel-slide img-src="statics/sarah_retail_owner_woman_portrait_925x.jpg" />
            </q-carousel>

since you are smarter than me, by any chance do you have a solution or suggestion so i could fix this? thank you!

[genyded]

You’re passing a sting to thumbnails-horizontal, put a colon in front of it like :thumbnails-horizontal=“true” to bind it to a truthy value (not the string “true”). If that does not help, not sure what else to try. The rest looks like it should work to me.