<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Carousel - Gallery - Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- IE polyfills, keep the order please -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<!-- Agular 2 -->
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
<!-- Config Agular 2 and Typescript -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- Run the application -->
<body>
<h1>Angular 2 Carousel - Gallery</h1>
<my-app class="container" style="display: block">Loading Sample...</my-app>
<div style="padding-top:50px">
<a target="_blank" href="http://www.angulartypescript.com/angular-2-tutorial/" title="Angular 2 Tutorial">
<img src="http://www.angulartypescript.com/wp-content/uploads/2016/03/learn-more-angular-2.png" alt="Smiley face" height="200" width="500">
</a>
<ul class="nav nav-pills nav-stacked" >
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-tutorial/" title="Angular 2 Home"> Angular 2 Tutorial </a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-introduction/">Angular 2 Introduction</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-architecture/">Angular 2 Architecture</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-annotations/">Angular 2 Annotations</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-getting-started/">Angular 2 Setup</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-hello-world/">Angular 2 Hello World</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-components/">Angular 2 Components</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-template-syntax/">Angular 2 Template Syntax</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-data-binding/">Angular 2 Data Binding</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-forms/">Angular 2 Forms</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-formbuilder-example/">Angular 2 Formbuilder</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-router-example/">Angular 2 Router</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-http-example-typescript/">Angular 2 HTTP</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-services/">Angular 2 Service</a></li>
</ul>
</div>
</body>
</html>
<!--
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/
-->
/* Styles go here */
/**
* Created by Tareq Boulakjar. from angulartypescript.com
*/
import {bootstrap} from 'angular2/platform/browser';
import {Angular2Carousel} from './carousel-example';
bootstrap(Angular2Carousel);
/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/
*/
import {Component, OnDestroy, Input} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {Slide} from './slide.component';
export enum Direction {UNKNOWN, NEXT, PREV}
@Component({
selector: 'carousel',
directives: [NgFor],
template: `
<div (mouseenter)="pause()" (mouseleave)="play()" class="carousel slide">
<ol class="carousel-indicators" [hidden]="slides.length <= 1">
<li *ngFor="#slidez of slides" [class.active]="slidez.active === true" (click)="select(slidez)"></li>
</ol>
<div class="carousel-inner"><ng-content></ng-content></div>
<a class="left carousel-control" (click)="prev()" [hidden]="!slides.length">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" (click)="next()" [hidden]="!slides.length">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
`
})
export class Carousel implements OnDestroy {
@Input() public noWrap:boolean;
@Input() public noPause:boolean;
@Input() public noTransition:boolean;
@Input() public get interval():number {
return this._interval;
}
public set interval(value:number) {
this._interval = value;
this.restartTimer();
}
private slides:Array<Slide> = [];
private currentInterval:any;
private isPlaying:boolean;
private destroyed:boolean = false;
private currentSlide:Slide;
private _interval:number;
public ngOnDestroy() {
this.destroyed = true;
}
public select(nextSlide:Slide, direction:Direction = Direction.UNKNOWN) {
let nextIndex = nextSlide.index;
if (direction === Direction.UNKNOWN) {
direction = nextIndex > this.getCurrentIndex() ? Direction.NEXT : Direction.PREV;
}
// Prevent this user-triggered transition from occurring if there is already one in progress
if (nextSlide && nextSlide !== this.currentSlide) {
this.goNext(nextSlide, direction);
}
}
private goNext(slide:Slide, direction:Direction) {
if (this.destroyed) {
return;
}
slide.direction = direction;
slide.active = true;
if (this.currentSlide) {
this.currentSlide.direction = direction;
this.currentSlide.active = false;
}
this.currentSlide = slide;
// every time you change slides, reset the timer
this.restartTimer();
}
private getSlideByIndex(index:number) {
let len = this.slides.length;
for (let i = 0; i < len; ++i) {
if (this.slides[i].index === index) {
return this.slides[i];
}
}
}
private getCurrentIndex() {
return !this.currentSlide ? 0 : this.currentSlide.index;
}
private next() {
let newIndex = (this.getCurrentIndex() + 1) % this.slides.length;
if (newIndex === 0 && this.noWrap) {
this.pause();
return;
}
return this.select(this.getSlideByIndex(newIndex), Direction.NEXT);
}
private prev() {
let newIndex = this.getCurrentIndex() - 1 < 0 ? this.slides.length - 1 : this.getCurrentIndex() - 1;
if (this.noWrap && newIndex === this.slides.length - 1) {
this.pause();
return;
}
return this.select(this.getSlideByIndex(newIndex), Direction.PREV);
}
private restartTimer() {
this.resetTimer();
let interval = +this.interval;
if (!isNaN(interval) && interval > 0) {
this.currentInterval = setInterval(() => {
let nInterval = +this.interval;
if (this.isPlaying && !isNaN(this.interval) && nInterval > 0 && this.slides.length) {
this.next();
} else {
this.pause();
}
}, interval);
}
}
private resetTimer() {
if (this.currentInterval) {
clearInterval(this.currentInterval);
this.currentInterval = null;
}
}
public play() {
if (!this.isPlaying) {
this.isPlaying = true;
this.restartTimer();
}
}
public pause() {
if (!this.noPause) {
this.isPlaying = false;
this.resetTimer();
}
}
public addSlide(slide:Slide) {
slide.index = this.slides.length;
this.slides.push(slide);
if (this.slides.length === 1 || slide.active) {
this.select(this.slides[this.slides.length - 1]);
if (this.slides.length === 1) {
this.play();
}
} else {
slide.active = false;
}
}
public removeSlide(slide:Slide) {
this.slides.splice(slide.index, 1);
if (this.slides.length === 0) {
this.currentSlide = null;
return;
}
for (let i = 0; i < this.slides.length; i++) {
this.slides[i].index = i;
}
}
}
import {Component, OnInit, OnDestroy, Input, HostBinding } from 'angular2/core';
import {Carousel, Direction} from './carousel.component';
@Component({
selector: 'slide',
template: `
<div [class.active]="active" class="item text-center">
<ng-content></ng-content>
</div>
`
})
export class Slide implements OnInit, OnDestroy {
@Input() public index:number;
@Input() public direction:Direction;
@HostBinding('class.active')
@Input() public active:boolean;
@HostBinding('class.item')
@HostBinding('class.carousel-item')
private addClass:boolean = true;
constructor(private carousel:Carousel) {
}
public ngOnInit() {
this.carousel.addSlide(this);
}
public ngOnDestroy() {
this.carousel.removeSlide(this);
}
}
/**
* Created by Tareq Boulakjar. from angulartypescript.com
*/
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Slide} from './slide.component';
import {Carousel} from './carousel.component';
/*Angular 2 Carousel - Gallery*/
@Component({
selector: 'my-app',
template:`
<div class="row">
<div class="col-md-12">
<carousel [interval]="NextPhotoInterval" [noWrap]="noLoopSlides">
<slide *ngFor="#slidez of slides; #index=index"
[active]="slidez.active">
<img [src]="slidez.image" style="margin:auto;">
<div class="carousel-caption">
<h3 style="background-color: transparent;color: white;">Slide {{index + 1}}</h3>
<p style="background-color: transparent;color: white;">{{slidez.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-info"
(click)="removeLastSlide()">Remove Last Slide
</button>
</div>
</div>
`,
directives: [Slide,Carousel, CORE_DIRECTIVES, FORM_DIRECTIVES],
})
export class Angular2Carousel {
//The time to show the next photo
private NextPhotoInterval:number = 5000;
//Looping or not
private noLoopSlides:boolean = true;
//Photos
private slides:Array<any> = [];
constructor() {
this.addNewSlide();
}
private addNewSlide() {
this.slides.push(
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car1.jpg',text:'BMW 1'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car2.jpg',text:'BMW 2'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car3.jpg',text:'BMW 3'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car4.jpg',text:'BMW 4'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car5.jpg',text:'BMW 5'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car6.jpg',text:'BMW 6'}
);
}
private removeLastSlide() {
this.slides.pop();
}
}