|
1 | | -<!DOCTYPE html> |
2 | | -<html lang="en"> |
3 | | -<head> |
4 | | - <meta charset="UTF-8"> |
5 | | - <title>Title</title> |
6 | | -</head> |
7 | | -<body> |
8 | | - |
9 | | -</body> |
10 | | -</html> |
| 1 | +<demo-section [name]="name" [src]="src"> |
| 2 | + <p>A slideshow component for cycling through elements—images or slides of text—like a carousel. <em>Nested carousels are not supported.</em></p> |
| 3 | + |
| 4 | + <h2>Contents</h2> |
| 5 | + <ul> |
| 6 | + <li><a routerLink="." fragment="usage">Usage</a></li> |
| 7 | + <li><a routerLink="." fragment="examples">Examples</a> |
| 8 | + <ul> |
| 9 | + <li><a routerLink="." fragment="captions">Optional captions</a></li> |
| 10 | + <li><a routerLink="." fragment="config">Configuring defaults</a></li> |
| 11 | + <li><a routerLink="." fragment="dynamic">Dynamic Slides</a></li> |
| 12 | + </ul> |
| 13 | + </li> |
| 14 | + <li><a routerLink="." fragment="api-reference">API Reference</a> |
| 15 | + <ul> |
| 16 | + <li><a routerLink="." fragment="carousel-component">CarouselComponent</a></li> |
| 17 | + <li><a routerLink="." fragment="slide-component">SlideComponent</a></li> |
| 18 | + <li><a routerLink="." fragment="carousel-config">CarouselConfig</a></li> |
| 19 | + </ul> |
| 20 | + </li> |
| 21 | + </ul> |
| 22 | + |
| 23 | + <h2 routerLink="." fragment="usage" id="usage">Usage</h2> |
| 24 | + |
| 25 | + <p [innerHtml]="titleDoc"></p> |
| 26 | + |
| 27 | + <h2 routerLink="." fragment="examples" id="examples">Examples</h2> |
| 28 | + |
| 29 | + <!-- basic --> |
| 30 | + <ng-sample-box [ts]="demos.basic.component" [html]="demos.basic.html"> |
| 31 | + <demo-carousel-basic></demo-carousel-basic> |
| 32 | + </ng-sample-box> |
| 33 | + |
| 34 | + <!-- captions --> |
| 35 | + <h3 routerLink="." fragment="captions" id="captions">Optional captions</h3> |
| 36 | + <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code><slide></code>. |
| 37 | + Place just about any optional HTML within there and it will be automatically aligned and formatted.</p> |
| 38 | + <ng-sample-box [ts]="demos.captions.component" [html]="demos.captions.html"> |
| 39 | + <demo-carousel-captions></demo-carousel-captions> |
| 40 | + </ng-sample-box> |
| 41 | + |
| 42 | + <!-- config --> |
| 43 | + <h3 routerLink="." fragment="config" id="config">Configuring defaults</h3> |
| 44 | + <ng-sample-box [ts]="demos.config.component" [html]="demos.config.html"> |
| 45 | + <demo-carousel-config></demo-carousel-config> |
| 46 | + </ng-sample-box> |
| 47 | + |
| 48 | + <!-- dynamic --> |
| 49 | + <h3 routerLink="." fragment="dynamic" id="dynamic">Dynamic Slides</h3> |
| 50 | + <ng-sample-box [ts]="demos.dynamic.component" [html]="demos.dynamic.html"> |
| 51 | + <demo-carousel-dynamic></demo-carousel-dynamic> |
| 52 | + </ng-sample-box> |
| 53 | + |
| 54 | + <h3 routerLink="." fragment="api-reference" id="api-reference">API Reference</h3> |
| 55 | + <ng-api-doc id="carousel-component" directive="CarouselComponent"></ng-api-doc> |
| 56 | + <ng-api-doc id="slide-component" directive="SlideComponent"></ng-api-doc> |
| 57 | + <ng-api-doc-config id="carousel-config" type="CarouselConfig"></ng-api-doc-config> |
| 58 | +</demo-section> |
0 commit comments