milogert / elm-gallery

Image and general purpose content gallery with touch support

Elm-gallery

A simple content and/or image gallery with touch and keyboard navigation.

example live | example code

Example code

type alias Model =
    { gallery : Gallery.State }


init : Model
init =
    { gallery = Gallery.init (List.length someSlides) }


type Msg
    = GalleryMsg Gallery.Msg


update : Msg -> Model -> Model
update msg model =
    case msg of
        GalleryMsg msg ->
            { model | gallery = Gallery.update msg model.gallery }


view : Model -> Html Msg
view model =
    Html.map GalleryMsg <|
        Gallery.view config model.gallery [ Gallery.Arrows ] someSlides


config : Gallery.Config
config =
    Gallery.config
        { id = "image-gallery"
        , transition = 500
        , width = Gallery.vw 60
        , height = Gallery.px 400
        }

Images by

esa