Back to Bootstrap

README

src/carousel/docs/README.md

2.5.62.0 KB
Original Source

Carousel creates a carousel similar to bootstrap's image carousel.

The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the ngTouch module as a dependency.

Use a <uib-carousel> element with <uib-slide> elements inside it.

  • active <i class="glyphicon glyphicon-eye-open"></i> (Default: Index of first slide) - Index of current active slide.

  • interval <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> (Default: none) - Sets an interval to cycle through the slides. You need a number bigger than 0 to make the interval work.

  • no-pause <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> (Default: false) - The interval pauses on mouseover. Setting this to truthy, disables this pause.

  • no-transition <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> (Default: false) - Whether to disable the transition animation between slides. Setting this to truthy, disables this transition.

  • no-wrap <small class="badge">$</small> (Default: false) - Disables the looping of slides. Setting no-wrap to an expression which evaluates to a truthy value will prevent looping.

  • template-url (Default: uib/template/carousel/carousel.html) - Add the ability to override the template used on the component.

uib-slide settings

  • actual <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> (Default: none) - Use this attribute to bind the slide model (or any object of interest) onto the slide scope, which makes it available for customization in the carousel template.

  • index <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> (Default: none) - The index of the slide. Must be unique.

  • template-url (Default: uib/template/carousel/slide.html) - Add the ability to override the template used on the component.