ngRepeat demo (buffered carousel)
A simple buffered ng-repeat with a custom template.
Swipe 50 slides with only 5 slides in the DOM
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
template-based demo
Various blocks automagically converted to a carousel.
Just add rn-carousel-indicator to display clickable indicators
-
This is a standard template
slide #1
-
Here's sophie :
-
A friend of mine :
- And to finish :
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
Standard carousel with thumbs navigation
This one has an initial index and the thumbs controls the rn-carousel-index binding
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
carousel with builtin prev/next controls
just add rn-carousel-control attribute to enable builtin controls
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
buffered ngRepeat carousel with custom controls
Custom controls demo, just update the rn-carousel-index index binding
{{ slideIndex + 1 }} / {{ slides4.length }}
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
object-based ngRepeat carousel with indicators
Use the object-based ngRepeat syntax. (not compatible with buffering)
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
togglable carousel via ng-if
If you use ng-if, be sure to use the dot-notation syntax for the index binding as it creates a child scope.
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
nested carousels
Carousels can also contain inner carousels.
-
This is a slide with an inner carousel:
-
A friend of mine :
- And to finish :
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
multple images in same slide
-
slide #{{ itemIndex }}
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
show part of next slide
ul rn-carousel rn-carousel-buffered class="my-slider"/ul
vertical slider
ul rn-carousel rn-carousel-buffered class="my-slider"/ul