Q-Carousel pass slide number (goTo)

  • Hello,

    Could you help me change the slide to display on the q-carousel ?
    I have a q-img photo gallery. When I click on an image I would like to open it in full screen in q-carousel.
    Everything works except image selection.

    My q-carousel component is declared as :

    <CarouselImage v-if="showCarousel"
              @finFullscreen="stopCarousel" />

    I don’t success to modify q-carousel number “slide” var with props or access the goTo method.

    I also tried to send event but the slide value not impact the visible image :

    // Parent
    this.$root.$emit('carousel-select', pos);
    // Child q-carousel
    created() {
        this.$root.$on('carousel-select', this.slideSelect);
    methods: {
        slideSelect(num) {
          this.slide = num;

    Thanks for your help

  • I’m not sure I used the good method, but I succeeded to change q-carousel image using “ref” and $nextTick

    <CarouselImage ref="carousel" v-if="showCarousel"
              @finFullscreen="stopCarousel" />
    methods: {
        showDiaporama(pos) {
          this.showCarousel = true;
          this.$nextTick(function selectSlide() {
            this.$refs.carousel.slide = pos;


Log in to reply