cedricss / elm-scroll-snap / ScrollSnap

Scrollable containers with snapping

This library is based on elm-css and accepts Html.Styled.Html items. If you are not using elm-css, use Html.Styled.fromUnstyled and Html.Styled.toUnstyled to convert the items and the resulting container.

Demo

horizontal : { id : String, itemWidth : { compatible | value : String, lengthOrMinMaxDimension : Css.Compatible, lengthOrAuto : Css.Compatible } } -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

Create a container with horizontal scrolling. The most visible item is centered horizontally.

div
    [ css
        [ border3 (px 1) solid (hex "eee")
        , width (px 500)
        ]
    ]
    [ ScrollSnap.horizontal
        { itemWidth = px 280 }
        [ item1, item2, item3, item4, item5 ]
    ]