bellroy / elm-infinite-gallery / InfiniteGallery

Configuration


type alias Config =
{ rootClassName : String
, id : String
, transitionSpeedWhenAdvancing : TransitionSpeed
, enableDrag : Basics.Bool
, swipeOffset : Basics.Int 
}

The configuration options of a Gallery. These can be passed in while initializing a new Gallery.

defaultConfig : Config

A convenience function that returns some default configuration options.


type TransitionSpeed
    = TransitionSpeed Basics.Int

A number of milliseconds to spend transitioning between indices.

Framework

init : { width : String, height : String } -> Config -> List (Html Msg) -> Gallery

Create a new Gallery, with given size, config and slides

update : Msg -> Gallery -> ( Gallery, Platform.Cmd.Cmd Msg )

Update the gallery with given Msg. You would need to wrap and unwrap these Msg's inside your own update function.

Example:

type Msg
    = MsgForGallery Gallery.Msg

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

view : Gallery -> Html Msg

Render your gallery e.g.

Example:

type Msg
    = MsgForGallery Gallery.Msg

view : Model -> Html Msg
view model =
    Html.div []
        [ Gallery.view model.gallery
            |> Html.map MsgForGallery
        ]

Control

previous : Gallery -> ( Gallery, Platform.Cmd.Cmd Msg )

Go to the previous slide

next : Gallery -> ( Gallery, Platform.Cmd.Cmd Msg )

Go to the next slide

goTo : Basics.Int -> Gallery -> ( Gallery, Platform.Cmd.Cmd Msg )

Go to a specific slide, animated

setIndex : Basics.Int -> Gallery -> ( Gallery, Platform.Cmd.Cmd Msg )

Go to a specific slide, direclty

Retrieve

getCurrentIndex : Gallery -> Basics.Int

Retrieve the current displayed Slide index

Definitions


type Gallery

The model of a Gallery You can create a new Gallery using the init function.


type Msg
    = DragStart PosX
    | DragAt PosX
    | DragEnd
    | Next
    | Previous
    | GoTo Basics.Int
    | SetIndex Basics.Int
    | SetTransitionSpeed TransitionSpeed
    | Batch (List ( TransitionSpeed, Msg ))
    | TransitionEnd

The Gallery's internal Msg's