Image sliders (Otter and Smart Slider 3) in header widget not visible in mobile view

[mark-orion]

Description

Sliders (Otter slider and Smart Slider 3) are not visible in mobile view. The area is just left blank.

Step-by-step reproduction instructions

1. Install Smart Slider 3 for Otter
2. Create a slider and add it to the header in mobile view.
3. Slider will be displayed in the preview but not on an actual mobile device.
4. If the mobile browser supports desktop view, then the slider is visible if that option is selected.

Screenshots, screen recording, code snippet or Help Scout ticket

No response

Environment info

https://pastebin.com/pypgtzmm

Is the issue you are reporting a regression

No

[cristian-ungureanu]

@HardeepAsrani I've tried to fix this but I couldn't. The issue is the same as this one: https://github.com/Codeinwp/otter-blocks/issues/1750. Because the Otter slider is loaded in a grid/flex container the resize algorithm of Glide doesn't work as expected. The issue is reported on Glide's repository: https://github.com/glidejs/glide/issues/534 but no fix so far.

Here's what I've tried:

1. Updating Glide script in Otter to the latest version - no result
2. Adding this piece of code:

.wp-block-themeisle-blocks-slider {
    display: grid;
}

Here the fix seems to work but if you resize the window and switch between mobile and desktop header, when you get back to mobile the slider breaks again

Regarding Smart Slider 3, I could replicate the issue only if another slider was loading on the same page. It appears that this is a limitation of the plugin ( https://wordpress.org/support/topic/multiple-slides-simultaneously/ ). Maybe that's why our user mentioned it too.

[HardeepAsrani]

@cristian-ungureanu We have a frontend script that we add to Glide, will it be possible to add the CSS logic there and listen for resize change? https://github.com/Codeinwp/otter-blocks/blob/master/src/blocks/frontend/slider/index.js