Manage

Notes and Queries

I need to say it up front: The carousel shown on small screens is problematic. It's not accessible, and the buttons for changing the image shown are too small (only shown on small viewports). This is in line with the design provided. But I don't like it.

I used Siema for the carousel, but even the package creator notes I consider carousels as an anti-pattern and I would suggest you to find a better UI pattern than carousel for your current project. I would agree. It seems just so difficult to make one that works properly.

I also misunderstood the design specifications, as I thought the carousel was only needed at small screen sizes (a lesson in itself there). This was more complicated than I had hoped as I needed to set this up in a JS file before the carousel component was created.

I achieved this using the following in my JS:

if (width.matches) {
  // instantiate the carousel
}

This worked, but this means that content is hidden if the viewport is expanded from the small to medium media query (I don't know if anyone really does this aside from web developers, but better not to take the chance), which is not ideal (although it works the other way round - of a fashion).

Static Previews