Slider not working inside a flex container

[cristian-ungureanu]

Closes #1750, Codeinwp/neve#4092.

Summary

• Due to a Glide bug, the slider is stretching far more than the container if the container has a flexible width.
• It seems that making the container "display:grid" fixes the issue
• The fix was already in Otter but it only worked if you would have added the Slider inside a column

Test instructions

• Install Neve, Neve Pro and Otter
• Add a widget section inside Neve's header and inside that widget section add a Slider
• Save the customizer and check it on frontend
• Please check Slider images not rendered if added in Neve's header #1750 and also Image sliders (Otter and Smart Slider 3) in header widget not visible in mobile view neve#4092 and try to see if the problem is solved

Please note that the issue I've mentioned here is still there but I think we can consider it an edge case. Here's how it manifests: https://vertis.d.pr/v/Nm55m6

---

Checklist before the final review

• Included E2E or unit tests for the changes in this PR.
• Visual elements are not affected by independent changes.
• It is at least compatible with the minimum WordPress version.
• It loads additional script in frontend only if it is required.
• Does not impact the Core Web Vitals.
• In case of deprecation, old blocks are safely migrated.
• It is usable in Widgets and FSE.
• Copy/Paste is working if the attributes are modified.
• PR is following the best practices

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	284.71 KB	284.71 KB	0 B (0.00%)
Blocks	1.5 MB	1.5 MB	-9 B (-0.00%)
CSS	91.71 KB	91.71 KB	0 B (0.00%)
Dashboard	176.79 KB	176.79 KB	0 B (0.00%)
Export Import	89.53 KB	89.53 KB	0 B (0.00%)
Pro	354.14 KB	354.14 KB	0 B (0.00%)

[pirate-bot]

Plugin build for 0bbfa37 is ready 🛎️!

• Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
• Download Otter Pro - Production ~ Development
• Download Blocks Animation - Production ~ Development
• Download Blocks CSS - Production ~ Development
• Download Blocks Export Import - Production ~ Development

[pirate-bot]

E2E Tests

Playwright Test Status:

Performance Results

serverResponse: 184.4, firstPaint: 565.1, domContentLoaded: 1647.9, loaded: 1649.9, firstContentfulPaint: 9692.15, firstBlock: 16616, type: 41.25, minType: 38.71, maxType: 46.97, typeContainer: 12.25, minTypeContainer: 10.83, maxTypeContainer: 16.66, focus: 58.61, minFocus: 52.11, maxFocus: 71.81, inserterOpen: 23.45, minInserterOpen: 22.21, maxInserterOpen: 25.43, inserterSearch: 7.59, minInserterSearch: 7.25, maxInserterSearch: 8.34, inserterHover: 36.35, minInserterHover: 34.28, maxInserterHover: 38.09, listViewOpen: 149.14, minListViewOpen: 134.29, maxListViewOpen: 178.43

[Soare-Robert-Daniel]

Your solution is 🔥 . Also, it is not breaking for me in Chrome, Vivaldi, Firefox, and Safari 💯
https://github.com/Codeinwp/otter-blocks/assets/17597852/b9056dd2-9691-4e1d-b004-ad5240c8fef9

[rodica-andronache]

hey @cristian-ungureanu I'm not sure what I'm missing, but the slider is not working for me. I've tried both on instawp and local. https://vertis.d.pr/v/vL02Tl
You can check it here:

https://yellowed-yacare-oegik.vertisite.cloud/
user: admin
pass: yyF@^@tgUQuReny#4MmjU*cHmim

[cristian-ungureanu]

Hey @rodica-andronache, thanks for testing. I opened another ticket for it here: #1907, it seems the files are not loaded if you add a Slider block in the header like this.

When I tested it, I had another slider block inside my page, that's why I didn't see this issue. Hardeep or Robert should be able to handle it. Until then, to test this particular issue, you can add another slider inside the page content.

[rodica-andronache]

@cristian-ungureanu ok, tested again with another slider in the content of the page, and I can confirm that in that case, the slider from the header is loading as well.
But there is another issue. The arrows of the slider from the header area are not working, on mobile https://vertis.d.pr/v/2djypx

[Soare-Robert-Daniel]

Now, the slider should work in Neve Header on Mobile.

The solution was not noticeable at first.

When you use the header builder for desktop and mobile, and add the same widget then the slider will appear in two places: the section for desktop and the section for mobile.

Because we were using a dump selector like #${ slider.id }, we were only getting the first apparition of the slider, which in the context of the builder was the desktop one. This made that the mobile slider to be left out.

We should avoid as much as possible to make selectors like this because it took a noticeable time to debug.

[pirate-bot]

🎉 This PR is included in version 2.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀