angular4 example

HTML

<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<my-app></my-app>

SCSS

#carousal {
	overflow: hidden;
	position: relative;
	
	.carousal-wrapper {
		list-style: none;
		padding: 0;
		margin: 0;
		transition: all 0.3s ease;
		display: flex;
		flex-direction: row;
		.carousal-item {
			display: inline-flex;
			min-width: 250px;
			max-width: 250px;
			height: 200px;
			justify-content: center;
			align-items: center;
			border: 1px solid #ddd;
			margin: 0 10px;
		}
	}
	.arrows {
		/* position: absolute; */
		top: 10px;
    left: 0;
    right: 0;
		/* opacity: 0; */
		.arrow {
			/* position: absolute; */
			/* display: none; */
			cursor: pointer;
			&.disabled {
				color: grey;
				cursor: default;
				pointer-events: none;
			}
			&.prev {
				right: auto;
				left: 0;
			}
			&.next {
				right: 0;
				left: auto;
			}
		}
	}
}

TypeScript

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
    <div id='carousal'>
			<ul class='carousal-wrapper' [ngStyle]="styles">
				<li class='carousal-item'>1</li>
				<li class='carousal-item'>2</li>
				<li class='carousal-item'>3</li>
				<li class='carousal-item'>4</li>
				<li class='carousal-item'>5</li>
				<li class='carousal-item'>6</li>
			</ul>
			<div class='arrows'>
				<span class='arrow prev' (click)="prev()" [ngClass]="{'disabled' : prevDisabled}">Prev</span>
				<span class='arrow next' (click)="next()" [ngClass]="{'disabled' : nextDisabled}">Next</span>
			</div>
		</div>
  `,
})
class SliderComponent {	
	styles = {
		'left': '0px'
	}
	prevDisabled=true;
	nextDisabled=false;
	
	setMyStyles(marginValue) {
		this.styles = {
			'left': marginValue
		}
	}
	private prev() {		
		let calculatedMargin = this.findMargin('prev');
		this.setMyStyles(calculatedMargin+ 'px');
	}
	
	private next() {
		let calculatedMargin = this.findMargin('next');
		this.setMyStyles(calculatedMargin+ 'px');
	}
	
	private findMargin(action) {
		let value = parseInt(this.styles['left']);
		if(action === 'prev') {
			value = value + 272;
		} else {
			value = value - 272;
		}
		this.setBtnStates(value);
		return value;
	}
	private setBtnStates(value) {
		this.prevDisabled = value < 0 ?  false : true;
		this.nextDisabled = $('.carousal-wrapper').width() < ($('#carousal').width() )- value ?  true : false;
	}
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ SliderComponent ],
  bootstrap:    [ SliderComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);