How to use sliders and the settings

[Stephen Bower]

Please find below what I've managed to glean so far from trial and error and from snippets of help in the community. As this is far from obvious, I hope that this will save people a lot of time.

First of all, sliders ARE NOT responsive.

That means that they do not re-size depending on the viewer you are using.

SO

You need to create 2 to 4 sliders for each website - 1 for desktop, 1 for smartphone (and if desired, 1 for tablet landscape and 1 for tablet portrait). You can create one and then duplicate it 1-3 times. Tablet landscape (and even tablet portrait) are just about ok using desktop settings, but check before publishing.

Methodology

1 Duplicate slider for each view → highlight slider section → hit duplicate option (⧉) → click “duplicate this section here”.
2. Repeat for each view (as said above, tablet landscape mode will probably still work with desktop photo sizes and tablet portrait mode may still work)
3. For each slider section sure each is visible only to that setting - so the first is only visible to desktop (and tablet if you’re taking a shortcut) and one is visible only on smartphone (mobile).
4 Highlight slide - choose brush () (customise element) click “visibility” and choose the relevant option deselecting the other options. That way, only one slider will appear on the device browser being used.
5 Next - replace the images in the slider with the correct sized images for that display

Desktop = 1920 x 700
Tablet Landscape = 940 x 431
Tablet Landscape = 720 x 330
Mobile = 341 x 190

There are many free online resizers. Choose one that allows you to change both parameters and not just the width. You may need to disable any auto settings that maintain ratios. Always check the images still look good.