search

loryjs / lory

☀ Touch enabled minimalistic slider written in vanilla JavaScript.
http://loryjs.github.io/lory/
MIT License
2.28k stars 244 forks source link

Next/Prev "buttons" don't work if above the slider element in the DOM #773

Open Johnsoct opened 4 years ago

Johnsoct commented 4 years ago

First, love Lory!

Second, as for the issue I'm seeing is: the design I'm working with demands for the "prev/next" buttons to be above the carousel/slider, so I tried a few various things:

Not that it matters, but for the examples, I'm using Vue.js for this project...

a) I saved lory(el, options) to my component's local data and then on the custom buttons I created, set the @click callback to slider.next()/prev()... Nothing happened. Okay. b) I added the 'js_prev/next prev/next' classes to my custom button elements... Nothing happened. Okay. c) I removed my custom buttons and replaced them with the prerequisite HTML spans (which are not accessible, btw) and still, nothing happened.

So, I then put the prerequisite HTML spans back underneath the slider and BOOM, it works!

I got a bit curious and did the exact same steps above but I placed my custom buttons BELOW the slider, and what do you know, it works!

TL;DR;

I don't believe the carousel works when the control buttons are above/below the carousel, which is odd if I'm using the public API, yet, that's what's happening.

Johnsoct commented 4 years ago

I may have it working ATM, so I'll update this with what I find.

I may very well have been missing something!