Re-init slider after window change on Siema 1.5

[modwebpl]

Hello,

After update to 1.5 version infinite loop works like a charm but they need "reinit" slides after window change (on 1.4 I can change the window and slider works good).

[pawelgrzybek]

Hi.

This is true, when windows changes it's size it does reinit. It cause a little bit of a paint, but it is needed to recalculate perPage property because it needs to know how many slides to clone on each end os a frame. Does it cause any issues for you (apart from a little bit more performance heavy operation) ?

Thanks

[modwebpl]

The problem is serious because even if you turn off the "loop = false", if you change the size of the window, the carousel is still displaying badly and there is no longer any beautiful animation to reduce and adjust the slider.

I wonder how the carousel will behave when on the tablet in vertical will be 2 sliders and in horizontal 1 .. what will happen after changing the orientation of the tablet, the carousel will damage? :(

How can I "re-init" whole carousel after window resized ends ?

[pawelgrzybek]

Can you create a CodePen for me when the "carousel is still displaying badly" please ? I cannot see this issue at all. It rebuilds the markup and place all the element in the same place, it shouldnt affect carousel visually much.

[modwebpl]

Yea sure, here : https://codepen.io/modweb_pl/pen/oEeJex

[pawelgrzybek]

You probably forgot about something. Can you add your CSS and markup please? i cannot see anything without it.

[modwebpl]

CodePen updated: https://codepen.io/modweb_pl/pen/oEeJex

[modwebpl]

btw. with this CSS/JS setup everything works like a charm in 1.4.13.

Markup's creates by javascript in prototype method: setBaseClasses, setPagination & updatePagination

[pawelgrzybek]

I still can't see a thing. Can you provide a working CodePen example please?

[modwebpl]

Working example: https://codepen.io/modweb_pl/pen/oEeJex

[pawelgrzybek]

I see the issue now. Thanks for example. Expect a fix very soon! Sorry about it!!!

[modwebpl]

Thanks a lot! I can't even imagine, how i could work without "Siema carousel" = )

[pawelgrzybek]

No worries. Thanks for quick reaction and helping me to find a critical bug. Hopefully you like the things introduced in new 1.5. I mentioned your username on release page — hopefully you don't mind.

Thanks again and have a nice day 👋

[modwebpl]

No problem, thx for quick update. Know I notice some strange things, on init the main div have class: ".slider__list" and after change the size of window class was removed and I don't know why ?

I need to do a little "hack" for my project like this:

.slider {
& > div:first-of-type {
display: flex;
height: 100%;
}
}

when originally div:first-of-type have class ".slider__list" and of course I need to add class ".slider" to parent node of carousel =)

I don't know if it's a little bug?

[pawelgrzybek]

Hi again. This is highly expected. The div that your are applying class rebuilds every time when you change width of your browser. Ideally you shouldn't apply any styling to it. I cannot see your project in front of me so it is difficult for me to predict if you need it or not. Essentially avoid adding a custom styling to this element. Let Siema do the job and you style your inner elements.

[modwebpl]

Well ok, display: flex + height: 100% fix everything ;)

I make a little refactor of my code and now "dots" pagination works like a charm ; ).
And by the way, what happened to this beautiful slider animation when changing the size of the window?

[pawelgrzybek]

Some users complained for transitions on windows resize se it has been ditched. Personally I don't think it matters that much — majority of web users don't fiddle around with the size of a browsers. We, web developers do :-)

[modwebpl]

Yeap, it's truth ;)

[bretmorris]

Hey just wanted to jump in here as well. I have a Siema carousel of YouTube videos. Unfortunately, the newer releases of Siema cause my YouTube videos (YouTube iFrame API) to completely rebuild/restart every time the window is resized. Downgrading to 1.4.1 resolves this issue.

[pawelgrzybek]

Hi.

This is expected behavior of Siema 1.5 @bretmorris. New siema comes with a loop feature thet requires to rebuild a markup on resize. I can possibly improve the performance by doing that only when loop is enabled. Unfortunately there is no way to prevent this rebuilding when the carousel is looping infinitely :(

If this is an improvement that you would be after — I 'm more than happy to develop this feature to the next release.

Thanks for reporting and have a great day pals 🥑

[bretmorris]

@pawelgrzybek yeah would be great if it only happened when loop was enabled