No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-Carousel pass slide number (goTo)

    Help
    1
    2
    272
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      manur last edited by

      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

      M 1 Reply Last reply Reply Quote 0
      • M
        manur @manur last edited by

        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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post