• Main content
  • Main navigation
  • Go to the bottom of the page

This is a website demo of Hugolify

Hugolify demo

Menu

  • Blocks
  • Sections
    • Case studies
    • Docs
    • Events
    • Expertises
    • Jobs
    • Persons
    • Places
    • Posts
    • Products
    • Projects
    • Publications
    • Real estates
    • Services
  • Pages
    • Contact
    • Markdown
    • Shortcodes
    • Site map
  • Hugolify docs

Block gallery

Layout scrollsnap

Image gallery turning into a horizontal scroll-snap carousel below a breakpoint.

DocumentationPage code on Github
  1. Home
  2. Blocks
  3. Gallery
  4. Scrollsnap

Grid container / Column 3 / Breakpoint md (shorthand)

Lorem ipsum dolor sit amet.

Editable in the CMS with the « Horizontal scroll » select, which writes the breakpoint alone — ui.scrollsnap: md.

Grid container / Column 3 / Breakpoint all / Nav pointer / Pagination true

Lorem ipsum dolor sit amet.

Object form, front matter only: the CMS never writes nav nor pagination. Set that site-wide instead with blocks.gallery.scrollsnap.nav (pointer) and blocks.gallery.scrollsnap.pagination (true) — each key is read on its own, so a block keeps overriding its breakpoint alone.

Grid container / Column 4 / Breakpoint lg / Pagination pointer

Lorem ipsum dolor sit amet.

Object form, front matter only: the CMS never writes pagination. Set that site-wide instead with blocks.gallery.scrollsnap.pagination (pointer) — each key is read on its own, so a block keeps overriding its breakpoint alone.

Grid container / Column 3 / Breakpoint md (shorthand) / Theme light

Lorem ipsum dolor sit amet.

Editable in the CMS with the « Horizontal scroll » select, which writes the breakpoint alone — ui.scrollsnap: md.

Grid container / Column 3 / Breakpoint md (shorthand) / Theme highlight

Lorem ipsum dolor sit amet.

Editable in the CMS with the « Horizontal scroll » select, which writes the breakpoint alone — ui.scrollsnap: md.

Grid container / Column 3 / Breakpoint md (shorthand) / Theme accent

Lorem ipsum dolor sit amet.

Editable in the CMS with the « Horizontal scroll » select, which writes the breakpoint alone — ui.scrollsnap: md.

Grid container / Column 3 / Breakpoint md (shorthand) / Theme dark

Lorem ipsum dolor sit amet.

Editable in the CMS with the « Horizontal scroll » select, which writes the breakpoint alone — ui.scrollsnap: md.

Grid container / Column 3 / Breakpoint md (shorthand) / Theme neutral

Lorem ipsum dolor sit amet.

Editable in the CMS with the « Horizontal scroll » select, which writes the breakpoint alone — ui.scrollsnap: md.

Grid container / Column 3 / Breakpoint md (shorthand) / Theme black

Lorem ipsum dolor sit amet.

Editable in the CMS with the « Horizontal scroll » select, which writes the breakpoint alone — ui.scrollsnap: md.

Grid container / Column 3 / Breakpoint md (shorthand) / Theme white

Lorem ipsum dolor sit amet.

Editable in the CMS with the « Horizontal scroll » select, which writes the breakpoint alone — ui.scrollsnap: md.

  • Previous Documentation Grid
  1. Home
  2. Blocks
  3. Gallery
  4. Scrollsnap
Hugolify demo

Hugolify is a Github template for build easily a fast, accessible friendly and low carbon website!

Contact

Nulla luctus quam ut
nisi tincidunt
Contact-us

Primary menu

  • Home
  • Blocks
  • Hugolify docs

Secondary menu

  • Hugolify
  • Un Cinq
  • Legal mentions
  • Privacy policy
  • Sitemap
  • Contact
  • Github
  • Twitter
  • Linkedin

a low impact website crafted with Hugolify