pawelgrzybek / siema

Siema - Lightweight and simple carousel in pure JavaScript
https://pawelgrzybek.github.io/siema/
Other
3.48k stars 408 forks source link

siema.next() not working #267

Closed simplenotezy closed 4 years ago

simplenotezy commented 4 years ago

I am having some issues with siema.next(); not working. I have using Siema in a Vue / Nuxt application, and not sure if vue or nuxt is interfering. Anyhow, I have my previous/next buttons like this:

<a @click.prevent="nextSlide()" href="#" class="arrow prev" />
<a @click.prevent="prevSlide()" href="#" class="arrow next" />

And my methods like so:

    nextSlide (e) {
        console.log('Go next slide', this.siema);
        this.siema.next();
    },

I see that the console message is being fired, and it logs the siema object, but it stays on the current slide. The this.siema.currentSlide remains 0.

If I delete the float:left;width:25% div, then I see the next slide. So they are definitely there.

If I run $vm0.siema.goTo(1); $vm0.siema.currentSlide from the console, I get 0.

What can I do to debug this further?

pawelgrzybek commented 4 years ago

I am very sorry. This must be very vue specific behaviour and I am not the best one to comment on this one. I think it has something to do with the calling context.

I will be happy to help as long as you can present an example stripped down from framework abstractions.

simplenotezy commented 4 years ago

I see. Could you perhaps guide me into some right direction, in terms of how I could debug? It definitely worked in vue, in the same app, just a few days ago...

simplenotezy commented 4 years ago

Plus - it's working at another page I have. Just not this specific one.. hmm

simplenotezy commented 4 years ago

I noticed that the siema. innerElements only have 1 div, at the slider where it is not working, and 8 divs, at the page where it is working. But they seem to have been setup the same way.

simplenotezy commented 4 years ago

I think I have found the root cause. It seems as though the plugin: https://github.com/fengyuanchen/viewerjs is interfering. Because if I remove that component from my template where I also have the slider, it's working again.

simplenotezy commented 4 years ago

Sooooo weird. I have my viewerjs gallery wrapped around the Nuxt components: <client-only>. However, If I remove the client-only from the viewerjs gallery (which is not linked to siema in anyway, apart from being within the same parent div), then it works.

pawelgrzybek commented 4 years ago

I am very sorry for being helpless, this is very framework specific case and I am not familiar with it at all :(

simplenotezy commented 4 years ago

Ahh No worries! You're still a great help. Great to see you're also still maintaining this library. I know sliders aint great, but there are some good use cases for it ;)

Sent with GitHawk