search

Wikiki / bulma-carousel

Display a carousel
MIT License
136 stars 99 forks source link

slider-container expands more than the visible slides #86

Open alexberendei opened 5 years ago

alexberendei commented 5 years ago

Screenshot from 2019-07-02 10-05-20

I have this behavior after I've updated the bulma carousel to 4.0.4.

My quick fix was to override the css "slider" class and add overflow:hidden

tehfink commented 5 years ago

I had the same issue, so thanks for the tip. Unfortunately, it seems to break the pagination as well…

manushichev commented 5 years ago

@tehfink yes, navigation stops working with overflow:hidden. And not immediately, but after some actions, the logic of which I can not understand. Probably, a quick press "right" and "left" among others causes a breakdown. Also, the transition from dot navigation to arrows often causes a crash.

UPD 1. Error text.

Uncaught TypeError: Cannot read property 'offsetLeft' of undefined
    at n.value (bulma-carousel.min.js:formatted:1708)
    at e.value (bulma-carousel.min.js:formatted:1490)
    at o.value (bulma-carousel.min.js:formatted:531)
    at o.value (bulma-carousel.min.js:formatted:506)
    at e.value (bulma-carousel.min.js:formatted:1151)

UPD 2. It seems that problems with navigation arise in any case. They do not depend on overflow:hidden. Apparently, quick fix works as expected.

eman1986 commented 5 years ago

I hope this gets fixed soon, the temp fix posted works for now for me

janegwaww commented 5 years ago

I hava the same problem. It's fine in firefox and sarafi, just in chrome it expends the visible slides in device mode.

image

janegwaww commented 5 years ago

this is the sass source code,why comment overflow? image

janegwaww commented 5 years ago

there is the alternative plan use react: https://www.npmjs.com/package/react-responsive-carousel

eman1986 commented 5 years ago

some of us don't use react or ever want to.

janegwaww commented 5 years ago

year but bulma extensions's js is sock.

LZDevs commented 4 years ago

Adding overflow:hidden in Container worked for me. You can also add is-clipped class in container https://codepen.io/adhaxious/pen/JjdRwvO