State is indexed by the TransitionStage Transition type, to easily pattern match on the states the model can be in.

Configuration for the State

An initial State with the defaultStateOptions

An initial state with customized options

myOptions =
    { defaultStateOptions
        | interval = Just 2000
        , pauseOnHover = False
    }


init =
    initialStateWithOptions myOptions

when to start automatically cycling the slides

• Paused: frozen on the current slide
• Active: immediately start cycling
• WaitForUser: Wait for the user to perform one transition, then cycle automatically

Update the carousel

Typically called from your main update function

update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
    case message of
        CarouselMsg submsg ->
            ( { model | carouselState = Carousel.update submsg model.carouselState }
            , Cmd.none
            )

Internal Msg type

Move the carousel to the next slide.

Useful for implementing custom behavior, like transitioning when some key is pressed

update : Msg -> Model -> (Model, Cmd Msg)
update message model =
    case message of
        KeyPress keycode ->
            if keycode == 39 then -- right arrow
                ({ model | carouselState = Carousel.next model.carouselState }
                , Cmd.none
                }


            else
                ( model
                , Cmd.none
                )

When the transition is invalid, nothing will happen.

Move the carousel to the previous slide.

When the transition is invalid, nothing will happen.

Move the carousel to the nth slide

When the transition is invalid, nothing will happen.

Stop a carousel from automatically cycling.

(Re)start automatically cycling.

Opaque type that defines the view configuration of a carousel

Creates an initial/default view configuration for a carousel

Create a carousel element

Carousel.config CarouselMsg []
    |> Carousel.withIndicators
    |> Carousel.slides
        [ slideOne model -- view function to create a Slide
        , slideTwo model
        ]
    |> Carousel.view model.carouselState

• state The current view state
• config The configuration for the display of the carousel

Add slides

Adds previous and next controls

Add indicators

When using automatic cycling you must remember to call this function in your main subscriptions function

subscriptions : Model -> Sub Msg
subscriptions model =
    Carousel.subscriptions model.carouselState CarouselMsg

• state The current view state of the carousel
• toMsg Message constructor function that is used to step the view state forward