1.4.1 Procedures

Procedure: carousel KEY: #:id #:carousel-list-css #:item-width #:item-height #:carousel-item-css #:carousel-item-content-css #:carousel-list-wrapper-css #:carousel-button-css #:carousel-left-button-css #:carousel-right-button-css #:no-js-hint #:fragments ¶

Construct a carousel UI component.

Items are centred on a scroll-snap track that pans with a swipe, and the previous/next arrows page exactly one item at a time using the live gap between items. The arrows themselves are frosted glass discs: compact on phones, where the track needs every pixel it can get, and larger from the small breakpoint up. A disc wears the framework’s own frost layer, at the gentle end of its strength, so the glass is round where the disc is round.

id

The unique HTML string identifier for the inner carousel list element.

carousel-list-css

List of symbols representing CSS classes for the <ul> element.

item-width

List of symbols specifying the width CSS classes for each carousel item.

item-height

List of symbols specifying the height CSS classes for each carousel item.

carousel-item-css

List of symbols representing CSS classes for each item wrapper <li>.

carousel-item-content-css

List of symbols representing CSS classes for the wrapper <div> of the content.

carousel-list-wrapper-css

List of symbols representing CSS classes for the outer wrapper <div>.

carousel-button-css

List of symbols representing base CSS classes for the previous/next buttons.

carousel-left-button-css

List of symbols representing additional CSS classes for the left (previous) button.

carousel-right-button-css

List of symbols representing additional CSS classes for the right (next) button.

no-js-hint

Fallback copy shown inside a <noscript> element when JavaScript is disabled.

fragments

A list of HTML/component S-expression fragments to be rendered as the carousel items.

(carousel #:id "image-carousel"
          #:fragments '(((img (@ (src "img1.png"))))
                        ((img (@ (src "img2.png"))))))