vue-slick-carousel icon indicating copy to clipboard operation
vue-slick-carousel copied to clipboard

Issue with absolute positioned children

Open RasmusO95 opened this issue 5 years ago • 5 comments

There appears to be some issues when children of the slider are absolutely positioned.

Im using vimeo videos as some of my slides, which internally is just an iframe but that iframe is absolutely positioned according to its parent. This appears to mess up, as shown in this video:

https://drive.google.com/uc?id=1cwnbuheemHWTkk5XtJJrNzCphC4HPlUH

As you can see, after i scroll past the video, and i click any other image in the slide, it activates the vimeo player. If i right click and inspect any element in the slide, it always sends me here:

https://i.imgur.com/2Ol0RX3.png

to the first absolutely positioned vimeo player element.

I see that all slick-slide elements gets an inline style which includes "position: relative;" is there a reason for this?

RasmusO95 avatar Mar 17 '20 09:03 RasmusO95

UPDATE:

There appears to be no issue with absolute positioned children, IF "fade" is set to false.

https://codesandbox.io/s/compassionate-dream-i8jpn

if you try this and goto any slide that aint a video, and double click, youll hear the vimeo video start playing.

If you set the "fade" to false, then it works.

RasmusO95 avatar Mar 17 '20 10:03 RasmusO95

image

don't know why, the codesandbox doesn't work.

kyuwoo-choi avatar Mar 19 '20 00:03 kyuwoo-choi

The codepen doesnt work for you? I just tried and looks to work here, is there somehow else i can come with an example that would work better for you?

RasmusO95 avatar Mar 19 '20 09:03 RasmusO95

The codesandbox still doesn't work for me. same type error. I'll try local according to your description.

kyuwoo-choi avatar Mar 24 '20 06:03 kyuwoo-choi

I also encounter this using SSR with a link inside the slider. it always used the last slide link. After disabling fade it worked fine, hope this will help out

caztial avatar Apr 11 '21 09:04 caztial