material-carousel — @viewflow/material

layout="uncontained" — same-size items, trailing bleed, proximity snap

layout="uncontained-multi-aspect" — items with mixed aspect ratios

actionable items — link / disabled, with headline + supporting overlay

Reykjavík

Sept · 5 min read

Akureyri

Sept · 4 min read

Vík

Click me · check console

Höfn

Disabled

Selfoss

Sept · 5 min read

Húsavík

Sept · 8 min read

Egilsstaðir

Sept · 6 min read

Ísafjörður

Sept · 4 min read

Borgarnes

Sept · 3 min read

Stykkishólmur

Sept · 7 min read

Sample usage

<!-- uncontained — same-size items, trailing bleed, proximity snap -->
<material-carousel layout="uncontained" large-width="220">
  <material-carousel-item><img slot="media" src="..." alt="" /></material-carousel-item>
  <material-carousel-item><img slot="media" src="..." alt="" /></material-carousel-item>
</material-carousel>

<!-- uncontained-multi-aspect — items with mixed aspect ratios -->
<material-carousel layout="uncontained-multi-aspect">
  <material-carousel-item aspect="16:9"><img slot="media" src="..." alt="" /></material-carousel-item>
  <material-carousel-item aspect="9:16"><img slot="media" src="..." alt="" /></material-carousel-item>
</material-carousel>

<!-- actionable items with overlay text -->
<material-carousel layout="uncontained" large-width="260">
  <material-carousel-item href="/photo/1">
    <img slot="media" src="..." alt="" />
    <h3 slot="headline">Title</h3>
    <span slot="supporting">Caption</span>
  </material-carousel-item>
</material-carousel>