Gallery

View

-> List Controls

-> List ( String, Html Msg )

-> Html Msg

Gallery.view config model.gallery [] slides

Configuration

type Config

config :

{ id : String

, transition : Int

, width : Length

, height : Length

}

-> Config

 Gallery.config
    { id = "image-gallery"
    , transition = 500 -- time in milliseconds
    , width = Gallery.px 800
    , height = Gallery.px 400
    }

Dimensions

type Length

px : Float -> Length

pct : Float -> Length

rem : Float -> Length

em : Float -> Length

vw : Float -> Length

vh : Float -> Length

State

init : SlideCount -> State

Initialize a gallery state

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

update : Msg -> State -> State

type Msg
    = GalleryMsg Gallery.Msg


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

Definitions

type State

Tracks index, mouse and touch movements

type Msg

A message type for the gallery to update.

type alias SlideCount =

Int

Total number of slides

Controls

type Controls

= Arrows

index : Int -> State -> State

Go to slide at index

{ model | gallery = Gallery.index 10 model.gallery }

next : State -> State

Go to next slide

{ model | gallery = Gallery.next model.gallery }

previous : State -> State

Go to previous slide

{ model | gallery = Gallery.previous model.gallery }

current : State -> Int

Get current index

fysiweb/elm-gallery/1.0.0