fysiweb / elm-gallery / Gallery

View

view : Config -> State -> List Controls -> List ( String, Html Msg ) -> Html Msg

Gallery.view config model.gallery [] slides

Configuration


type Config

config : { id : String, transition : Basics.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 : Basics.Float -> Length

pct : Basics.Float -> Length

rem : Basics.Float -> Length

em : Basics.Float -> Length

vw : Basics.Float -> Length

vh : Basics.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 =
Basics.Int

Total number of slides

Controls


type Controls
    = Arrows

Navigation

index : Basics.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 -> Basics.Int

Get current index