From 83400033a3b7a91ad072a5d306355c9cd5a80d82 Mon Sep 17 00:00:00 2001 From: PliablePixels Date: Fri, 24 Jul 2015 15:48:01 -0400 Subject: integrated event scrubbing with direct image access - need to clean up code --- www/lib/angular-carousel/index.html | 331 ++++++++++++++++++++++++++++++++++++ 1 file changed, 331 insertions(+) create mode 100644 www/lib/angular-carousel/index.html (limited to 'www/lib/angular-carousel/index.html') diff --git a/www/lib/angular-carousel/index.html b/www/lib/angular-carousel/index.html new file mode 100644 index 00000000..4ed5efde --- /dev/null +++ b/www/lib/angular-carousel/index.html @@ -0,0 +1,331 @@ + + + + + angular-carousel demo + + + + + + + Fork me on GitHub + +

AngularJS Touch Carousel

+
+ Transform your ng-repeat or DOM nodes in a mobile-friendly carousel just by adding a 'rn-carousel' attribute to your HTML; AngularJS directives FTW :)

+ Carousels are data-bound to your ngRepeat collections and can be DOM buffered (good for performance) +

+ Swipe these demos with your mouse or finger +
+ +
+
+

Buffered ngRepeat demo

+
A simple buffered ng-repeat with a custom template. +
+ Swipe 50 slides with only 5 slides in the DOM. use builtin controls +
+
+ index : +
    +
  • +
    + #{{ slide.id }} +
    +
    • +
+
+
+
+

buffered ngRepeat with auto-slide(pause on hover) and builtin indicators

+
+
+
+ index: +
    +
  • +
    + #{{ slide.id }} +
    +
    • +
+
+
+
+
+
+

buffered ngRepeat and custom indicators

+
+
+
+
    +
  • +
    + #{{ slide.id }} +
    +
    • +
+
+ ★ +
+
+
+
+
+

buffered ngRepeat with custom transition

+
Use the 'hexagon' transition. index is shared with the carousel below. +
+
+
    +
  • +
    + #{{ slide.id }} +
    +
    • +
+
+
+
+
+

Custom templates without ng-repeat and auto-slide

+
+
+
+
    +
  • Slide 1
    • +
  • Slide 2
    • +
  • Slide 3
    • +
  • Slide 4
    • +
  • Slide 5
    • +
  • Slide 6
    • +
  • Slide 7
    • +
  • Slide 8
    • +
  • Slide 9
    • +
+
+
+
+
+

Lockable carousel

+
+ use rn-carousel-locked binding to dynamically lock/unlock the carousel +
+
+ +
    +
  • +
    + #{{ slide.id }} +
    +
    • +
+
+
+
+
+

Add/Remove items in the collection

+
+ The carousel is bound to your ngRepeat collection.
+ If you add items at the start of the collection, then by default, the slide position will change.
+ If you want to preserve position even when adding items at the head of the collection, you need to add the `rn-carousel-deep-watch` attribute. This has a performance impact so use carefully.
+ Works great with buffering too so you can have almost infinite slides while keeping only 5 items in the DOM
+
+
+ + +
    +
  • +
    + #{{ slide.id }} +
    +
    • +
+
+
+
+
+
+

End to End Swiping

+
+ The carousel is bound to your ngRepeat collection.
+ Total images: {{ totalimg }}
+ Images in one set: {{ setOfImagesToShow }}
+ Total sets of images: {{ totalimg / setOfImagesToShow | number:0}}
+
+
+
+ +
    +
  • +
    + #{{ slide.id }} +
    +
    • +
+
+
+
+ +
+

 

+

 

+ + + + + + + + -- cgit v1.2.3