Carousel load all slides

[bozaq]

Hi!

Is there a way to load all slides at render in a q-carousel instead of loading only when it shows for the first time? I am using keep-alive and the slides are loaded when they are shown after the first time, but I am looking for a way to load all at render, even the ones that are not showing yet.

Thank you!

[beets]

@bozaq Are you using the format like this?

    <q-carousel
      animated
      v-model="slide"
      arrows
      navigation
      infinite
    >
      <q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
      <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
      <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
      <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" />
    </q-carousel>

<

If so, you could try something like this in a mounted hook:

mounted() {
  const img1 = new Image()
  img1.src = "https://cdn.quasar.dev/img/mountains.jpg"

  const img2 = new Image()
  img2.src = "https://cdn.quasar.dev/img/parallax1.jpg"

  const img3 = new Image()
  img3.src = "https://cdn.quasar.dev/img/parallax2.jpg"

  const img4 = new Image()
  img4.src = "https://cdn.quasar.dev/img/quasar.jpg"

}

Edit: Note that you can be smarter the above code if you have the slides stored in some array, so you don’t have to hardcopy img1, img2, etc.

[bozaq]

@beets Thank you for your reply, but I did not understand what I am supposed to do with those Image objects after xD. Can they go in the img-src? Sorry, I can’t test it at the moment.

EDIT: I think I understood. You mean to use the Image objects to load the images right away, and then use the src of the Image object on img-src , like :img-src="img.src", right? That will do, thank you!

[beets]

@bozaq I don’t think you’ll need to actually do anything with the image objects. Just making the object and setting the src should be enough to load them, else the browser won’t load until the slide is mounted / navigated to. I followed the answer here: https://stackoverflow.com/a/29339033 which I’m pretty sure I’ve used before, I just had to re-google to find it.

[bozaq]

@beets I get it! Thank you once again