search

pawelgrzybek / siema

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

jumps on init #262

Closed tarponjargon closed 4 years ago

tarponjargon commented 4 years ago

I love siema but I'm having a problem where the slider jumps left and right on init.

https://www.youtube.com/watch?v=vQCa8mhPqFU

I load the whole gallery statically and then run siema on page load. When siema inits it replaces the gallery DOM node with the siema'd one.

Works great execpt for this weird jumping issue. It's more pronounced the more images there are in the slider. I.e. if there are only 2 images you won't see it (or it happens too fast to see). I've tried a bunch of CSS tricks but can't seem to fix it that way.

I also tried the fix noted in https://github.com/pawelgrzybek/siema/issues/254 but can't that that work, siema doesn't seem to load properly if it's hidden. But perhaps I'm misunderstanding the fix.

pawelgrzybek commented 4 years ago

Hi.

Looks to me like some CSS issue my friend. It must be very specific to your implementation. I would suggest to strip as much of CSS as you possibly can and then incrementally add it back line by line and check which property cause this jump. My obvious suspect would be some margin / padding on items.

Sorry for not giving you a copy / paste answer :(

tarponjargon commented 4 years ago

OK, will do. Thanks for answering. I love siema, I tried alot of different ones. It's the best!

tarponjargon commented 4 years ago

@pawelgrzybek I re-wrote the html using built-in bootstrap 4 styles and still seeing a problem:

https://youtu.be/KFV3A-ujU-s (shows a page re-load)

I think this is the issue mentioned in:

#252

The "jump" in my original video appears to be from the styles I added to try to correct it.

pawelgrzybek commented 4 years ago

Could you replicate on codepen please?

tarponjargon commented 4 years ago

Lol, I was afraid you were going to ask that :P OK I'll put something together

pawelgrzybek commented 4 years ago

That will be very helpful.