A carousel is a slideshow for cycling through a series of content.
State is indexed by the TransitionStage Transition
type,
to easily pattern match on the states the model can be in.
{ 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
when to start automatically cycling the slides
Paused
: frozen on the current slideActive
: immediately start cyclingWaitForUser
: Wait for the user to perform one transition, then cycle automaticallyupdate : 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
)
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.
Opaque type that defines the view configuration of a carousel
config : (Msg -> msg) -> List (Html.Styled.Attribute msg) -> Config msg
Creates an initial/default view configuration for a carousel
view : State -> Config msg -> Html.Styled.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
state
The current view stateconfig
The configuration for the display of the carouselslides : 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 : 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
state
The current view state of the carouseltoMsg
Message constructor function that is used to step the view state forward