Components.Carousel public
Ember implementation of Bootstrap's Carousel. Supports all original features but API is partially different:
| Description | Original | Component |
|---|---|---|
| Autoplays after first user event or on page load. | ride='carousel'|false | autoPlay=false|true |
| Disable automatic cycle. | interval=false | interval=0 |
| If first slide should follow last slide on "previous" event, the opposite will also be true for "next" event. | wrap=false|true | wrap=false|true |
| Jumps into specific slide index | data-slide-to=n | index=n |
| Keyboard events. | keyboard=false|true | keyboard=false|true |
| Left-to-right or right-to-left sliding. | N/A | ltr=false|true |
| Pause current cycle on mouse enter. | pause='hover'|null | pauseOnMouseEnter=false|true |
| Show or hide controls | Tag manipulation. | showControls=false|true |
| Show or hide indicators | Tag manipulation. | showIndicators=false|true |
| Waiting time of slides in an automatic cycle. | interval=n | interval=n |
Default settings are the same as the original, so you don't have to worry about changing parameters.
<BsCarousel as |car|>
<car.slide>
<img alt="First slide" src="slide1.jpg">
</car.slide>
<car.slide>
<img alt="Second slide" src="slide2.jpg">
</car.slide>
<car.slide>
<img alt="Third slide" src="slide3.jpg">
</car.slide>
</BsCarousel>
To better understand the whole documentation, you should be aware of the following operations:
| Operation | Description |
|---|---|
| Transition | Swaps two slides. |
| Interval | Waiting time after a transition. |
| Presentation | Represents a single transition, or a single interval, or the union of both. |
| Cycle | Presents all slides until it reaches first or last slide. |
| Wrap | wrap slides, cycles without stopping at first or last slide. |
Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.
Item Index
Methods
Properties
- autoPlay
- canTurnToLeft
- canTurnToRight
- childSlides
- childSlidesObserver
- currentIndex
- currentSlide
- directionalClassName
- followingIndex
- followingIndex
- hasInterval
- index
- indexObserver
- indicators
- interval
- isMouseHovering
- keyboard
- ltr
- nextControlClassName
- nextControlIcon
- nextControlLabel
- orderClassName
- pauseOnMouseEnter
- presentationState
- prevControlClassName
- prevControlIcon
- prevControlLabel
- shouldNotDoPresentation
- shouldRunAutomatically
- showControls
- showIndicators
- slideComponent
- transition
- transitionDuration
- wrap
Events
assignClassNameControls
privateIndicates what class names should be applicable to the current transition slides.
cycle
privateDo a presentation and calls itself to perform a cycle.
setFollowingIndex
privateSets the following slide index within the lower and upper bounds.
toAppropriateSlide
privateCoordinates the correct slide movement direction.
transitioner
privatewaitIntervalToInitCycle
privateWaits an interval time to start a cycle.
autoPlay boolean public
Starts automatic sliding on page load. This parameter has no effect if interval is less than or equal to zero.
canTurnToLeft unknown private
If a slide can turn to left, including corners.
canTurnToRight unknown private
If a slide can turn to right, including corners.
childSlides array private
All CarouselSlide child components.
childSlidesObserver unknown private
This observer is the entry point for real time insertion and removing of slides.
currentIndex unknown private
Indicates the current index of the current slide.
currentSlide unknown private
The current slide object that is going to be used by the nested slides components.
directionalClassName { 'left' | 'right' | null } private
Bootstrap style to indicate that a given slide should be moving to left/right.
followingIndex number private
Indicates the next slide index to move into.
followingIndex unknown private
The following slide object that is going to be used by the nested slides components.
hasInterval boolean private
index number public
Index of starting slide.
indexObserver unknown private
This observer is the entry point for programmatically slide changing.
indicators unknown private
interval number public
Waiting time before automatically show another slide. Automatic sliding is canceled if interval is less than or equal to zero.
isMouseHovering boolean private
If user is hovering its cursor on component. This property is only manipulated when 'pauseOnMouseEnter' is true.
keyboard boolean public
Should bind keyboard events into sliding.
ltr boolean public
If automatic sliding should be left-to-right or right-to-left. This parameter has no effect if interval is less than or equal to zero.
nextControlClassName string private
The class name to append to the next control link element.
nextControlIcon string public
The next control icon to be displayed.
nextControlLabel string public
Label for screen readers, defaults to 'Next'.
orderClassName string private
Bootstrap style to indicate the next/previous slide.
pauseOnMouseEnter boolean public
Pauses automatic sliding if mouse cursor is hovering the component. This parameter has no effect if interval is less than or equal to zero.
presentationState { 'didTransition' | 'willTransit' | null } private
The current state of the current presentation, can be either "didTransition" or "willTransit".
prevControlClassName string private
The class name to append to the previous control link element.
prevControlIcon string public
The previous control icon to be displayed.
prevControlLabel string public
Label for screen readers, defaults to 'Previous'.
shouldNotDoPresentation boolean private
shouldRunAutomatically boolean private
showControls boolean public
Show or hide controls.
showIndicators boolean public
Show or hide indicators.
slideComponent {String} private
transition string public
The type slide transition to perform. Options are 'fade' or 'slide'. Note: BS4 only
transitionDuration number public
The duration of the slide transition. You should also change this parameter in Bootstrap CSS file.
wrap boolean public
If false will hard stop on corners, i.e., first slide won't make a transition to the last slide and vice versa.
onSlideChanged
public
Action called after the slide has changed.
Event Payload:
-
toIndexObject