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"
              :carrouselImg="arrayImages"
              @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
    Manu



  • 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"
              :carrouselImg="arrayImages"
              @finFullscreen="stopCarousel" />
    
    ...
    
    methods: {
        showDiaporama(pos) {
          this.showCarousel = true;
          this.$nextTick(function selectSlide() {
            this.$refs.carousel.slide = pos;
          });
        },
    

    Manu


Log in to reply