Carousel Specification

A carousel component is used to browse or navigate through a collection of slides like galleries of images, cards, on-boarding tutorials or page-based interfaces. It can be used as a separate full – screen element or inside another component

Objectives

igx-carousel could be used as standalone component in order to show set of images. It should be highly customizable, providing capabilities like manipulation images transition, hide\show navigation buttons, load dynamically images.

User Stories

Developer

As a developer I want to be able to provide the slides to be displayed using ngFor directive.

<igx-carousel [interval]="interval" [pause]="pause" [loop]="loop">
     <igx-slide *ngFor="let slide of slides;" [active]="slide.active">
         <img [src]="slide.image">
     </igx-slide>
</igx-carousel>

Through pure markup

<igx-carousel [interval]="interval" [pause]="pause" [loop]="loop">
    <igx-slide [active]="slide.active">
        <img [src]="...">
    </igx-slide>
    <igx-slide>
        <img [src]="...">
    </igx-slide>
</igx-carousel>

I would like to have the ability to hook up on events emitted during certain state changes in the carousel and apply custom logic based on the events.
Navigation with Slide Indicators - As a citizen developer I want to add indicators to the carousel that support navigation, support the current status and progress ((in a bar for mobile devices)):
Dots (Page indicators - iOS) within the carousel at the bottom; if a vertical or on the right/left
Arrows outside the carousel; if a vertical or on the right/left
Text , ex.g., 3 out of 15 (more than 7 dots) within the carousel at the bottom; if a vertical or on the right/left
Progress Bar (more than 7 dots)
Thumbnails
Gestures - As a citizen developer I want to define gestures on a carousel/slider level (swipe to the left/right up/down) on touch devices.
I want to be able to set a route to which the user will navigate upon tap/click. (href to a new view)
I want to show multiple slides at the same time or to show no slide indicators and to define that by adjusting slide’s dimensions:
Height ( % ) vertical direction
Width ( % ) horizontal direction
I want to loop the carousel slides (false by default, not available in multiple slides shown)
The First and the Last slide can go backward and forward
If the loop is false: first slide can only go forward/ last slide can only go backwards
I want to choose if the carousel will be over scrollable or not (disables loop, bouncing animation).
I want to choose if the carousel will auto play or not (false by default, not available in multiple slides shown)
Auto-play is disabled on mobile and touch devices (hover doesn’t work)
Pause on user interaction (click, tap on the slide or the indicators), unpause on mouse leave
Pause on Hover, unpause on mouse leave in 5seconds (default)
I want to be disable navigation of the carousel.
I want to be able to set active slide.

End user

As end user I would like to:

Be able to set different images to the component.
Be able to navigate through all images with Next and Prev buttons.
Be able to use carousel indicators to navigate through the images.
Be able to stop, pause or play the image transition.

##Acceptance criteria

Have carousel that shows image/set of images.
Have carousel that should navigation button and image indicators.
Have the ability to stop, pause or play the image transition.
Have the ability to change current active slide.

Functionality

End User Experience

igx-carousel should always display initial image and navigation buttons or image indicators.

Developer Experience

igx-carousel should provide properties, events and methods what will manage carousel configuration and behaviors.

User Interface

The end user interface consists of:

Navigation buttons
Image indicators
Images container

API

Options

loop - Should the carousel wrap back to the first slide after it reaches the last. Defaults to true.
pause - Should the carousel stop playing on user interaction. Defaults to true.
interval - The amount of time in milliseconds between slides transition.
navigation - Controls should the carousel render the left/right navigation buttons. Defaults to true.
total - The number of slides the carousel currently has.
current - The index of the slide currently showing.
isPlaying - Returns whether the carousel is paused/playing.
isDestroyed - If the carousel is destroyed (ngOnDestroy was called).

Events

onSlideChanged - Emitted on slide change.
onSlideAdded - Emitted when a slide is being added to the carousel.
onSlideRemoved - Emitted whe a slide is being removed from the carousel.
onCarouselPaused - Emitted when the carousel is pausing.
onCarouselPlaying - Emitted when the carousel starts/resumes playing.

Methods

play() - Emits onCarouselPlaying event and starts the transition between slides.
stop() - Emits onCarouselPaused event and stops the transition between slides.
prev() - Switches to the previous slide. Emits onSlideChanged event.
next() - Switches to the next slide. Emits onSlideChanged event.
add(slide: IgxSlide) - Adds a slide to the carousel. Emits onSlideAdded event.
remove(slide: IgxSlide) - Removes an existing slide from the carousel. Emits onSlideRemoved event.
get(index: Number) - Returns the slide with the given index or null.
select(slide: IgxSlide, direction: Direction) - Selects the slide and the direction to transition to. Emits onSlideChanged event.