Design Notes

Replicating a layout seen on the Procopio website. Moving Box 3 gets me 99% of the way there. The one thing I haven't figured out is the custom position of the Nav dots inside the content but I'm quite happy with them being below the layout.

I haven't used the Nav Arrows sub stack which has limited positioning options. Instead I have crafted my own left and right SVG arrows in Logoist 5 and then applied the classes 'mb-action-next' and 'mb-action-prev' to the two SVG stacks that appear on every slide.

Adding more slides and the content within them should be a breeze but I would probably spend more time sorting out what the layout will look like on mobile first.

Update 18th Nov 23 - Having cleaned up the layout on mobile I have noticed that I cant get it to scroll (vertically) when I touch the image part (the part containing Moving Box 3) on my physical iPhone SE and iPad mini devices. I can only get it to scroll vertically when I touch either the menu or the area below the nav dots. I realise now that the same issue applies to another MB3 layout I did here. Its not so obvious as its further down the page.

z:1 applied to the MB3 stack so that the mobile (off canvas) menu appears in front of it.

Update 21st Nov 23 - Joe has just released a fix to MB3 that fixes the vertical scrolling issue on mobile and tablet so now the MB3 solution has become my preferred option (over Splider 2) as it supports Autoplay or automatic horizontal scrolling on phone and tablet whereas currently Splider 2 doesn't.

Update 22nd Nov 23 - To be fair to Stuart at Shaking the Habitual, when I asked him why his Splider2 slider wasn't Autoplaying on mobile he said to check my iPhone because the settings were probably preventing it. I did and he was right. Settings>Accessibilty>Motion>Reduce Motion was set to on. As soon as I turned this off the Splider 2 demo on the next template started to auto scroll horizontally. Here is a link to the Splider 2 equivalent of this page: Splider 2 demo

Note both the MB3 and Splider 2 template pages currently have the equivalent of Auto set on so that they scroll horizontally automatically.

When Maggie at the local coffee shop asked me what I had been doing today and I showed her she said she preferred to not have auto scroll on because she often didn't have time to read what was on the page before it had vanished. She preferred the idea of having the control buttons. Indeed the Procopio site which started me off down this track also does not auto scroll so it might be best not to use this feature when there is embedded text in the banner, or to set it to a really long interval.