EdutainmentLIVE / elm-bootstrap / Bootstrap.Carousel

A carousel is a slideshow for cycling through a series of content.

Model


type State

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


type alias StateOptions =
{ interval : Maybe Basics.Int
, keyboard : Basics.Bool
, pauseOnHover : Basics.Bool
, cycling : Cycling
, wrap : Basics.Bool
, startIndex : Basics.Int 
}

Configuration for the State

initialState : State

An initial State with the defaultStateOptions

initialStateWithOptions : StateOptions -> State

An initial state with customized options

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

init =
    initialStateWithOptions myOptions

defaultStateOptions : StateOptions


type Cycling

when to start automatically cycling the slides

Update

update : Msg -> State -> State

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
            )


type Msg

Internal Msg type

next : State -> State

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.

prev : State -> State

Move the carousel to the previous slide.

When the transition is invalid, nothing will happen.

toSlide : Basics.Int -> State -> State

Move the carousel to the nth slide

When the transition is invalid, nothing will happen.

pause : State -> State

Stop a carousel from automatically cycling.

cycle : State -> State

(Re)start automatically cycling.

View


type Config msg

Opaque type that defines the view configuration of a carousel

config : (Msg -> msg) -> List (Html.Attribute msg) -> Config msg

Creates an initial/default view configuration for a carousel

view : State -> Config msg -> Html msg

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

slides : List (Slide.Config msg) -> Config msg -> Config msg

Add slides

withControls : Config msg -> Config msg

Adds previous and next controls

withIndicators : Config msg -> Config msg

Add indicators

Subscriptions

subscriptions : State -> (Msg -> msg) -> Platform.Sub.Sub msg

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