antoniandre / vueper-slides

A touch ready and responsive slideshow / carousel for Vue 2 & 3.
https://antoniandre.github.io/vueper-slides
MIT License
568 stars 50 forks source link

Drag not working on Chrome/Brave & Chrome IOS #185

Open TAJ4K opened 2 years ago

TAJ4K commented 2 years ago

Hey, I recently started a project and decided to use Vueper-Slides for my carousel, I'm 99% sure I read the documentation correct, so I'm unsure why dragging is not working on desktop or pc, could it be a z-index issue somehow? The cursor for touchable shows, just dragging does nothing

<div id="carousel">
      <VueperSlides
        :parallax="parallax"
        :draggingDistance="50"
        :lazyLoadOnDrag="true"
        :lazy="true"
        :touchable="true"
        :progress="true"
        :slideMultiple="true"
        preventYScroll
        fixed-height="75vh"
      >
        <VueperSlide
          v-for="(slide, index) in pictures"
          :key="index"
          :alt="slide.description"
          :image="slide.link"
        >
        </VueperSlide>
      </VueperSlides>
    </div>
michaelnguyen-nl commented 2 years ago

Hello, my friend had this exact issue.

Are you getting the pictures dynamically? v-for="(slide, index) in pictures"

TAJ4K commented 2 years ago

Yeah, pictures array is returned from a GET to my API.

michaelnguyen-nl commented 2 years ago

Try adding a v-if="pictures" on <VueperSlides>. This should fix the problem by rendering VueperSlides together with the VueperSlide images.

The dragging issue is caused by the <VueperSlide> being rendered after you have initialized the <VueperSlides>.

TAJ4K commented 2 years ago

That somewhat worked but gave me inconsistency, so I just made a new variable and used that with v-if and just manually changed it to be true when pictures loaded, and that seemed to fix my problem perfectly.

TYSM

TAJ4K commented 2 years ago

Going to leave this open because I still think it's a bug with the library

michaelnguyen-nl commented 2 years ago

No problem, goodluck with your project.