fix background attachment

Author: c1sar

projects/slider/src/lib/slider.component.html

@@ -2,7 +2,7 @@
   <div [class]="(slide.className) ? 'slide ' + slide.className : 'slide'"
     *ngFor="let slide of slides"
     [style.background-image]="'url('+slide.img+')'"
-    [style.background-attachment]="option.animationType"
+    [style.background-attachment]="(option.animationType===animationType.FIXED) ? 'fixed': 'initial'"
     >
     <span *ngIf="slide.html" [innerHtml]="slide.html"></span>
     <h2 *ngIf="slide.title" [innerHtml]="slide.title" [class.h2-no-button]="!slide.button && !slide.description"></h2>

projects/slider/src/lib/slider.component.ts

@@ -9,6 +9,7 @@ import { ISlide } from './models/ISlide';
 import { ISliderEvent } from './models/ISliderEvent';
 import { IOptions } from './models/IOptions';
 import { BulletType } from './models/bullet-type.enum';
+import { AnimationType } from './models/animation-type.enum';
 
 const isMobile = navigator.userAgent.match(
   /(iPhone|iPod|iPad|Android|webOS|BlackBerry|IEMobile|Opera Mini)/i);
@@ -38,6 +39,7 @@ export class SliderComponent implements AfterViewInit, OnDestroy {
   timeBySlide: number;
 
   bulletType = BulletType;
+  animationType = AnimationType;
 
   movementInterval: number;
 

src/app/app.component.html

@@ -1,4 +1,3 @@
-<!-- <lib-slider [slides]="slides" [squareBullets]="true" [option]="option"></lib-slider> -->
-<lib-slider [slides]="slides"></lib-slider>
+<lib-slider [slides]="slides" [option]="option"></lib-slider>
 
 <h1>Slider Example</h1>

src/app/app.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { ISlide } from 'projects/slider/src/lib/models/ISlide';
 import { IOptions } from 'projects/slider/src/lib/models/IOptions';
+import { AnimationType } from 'projects/slider/src/lib/models/animation-type.enum';
+import { BulletType } from 'projects/slider/src/lib/models/bullet-type.enum';
 
 @Component({
   selector: 'app-root',
@@ -33,8 +35,10 @@ export class AppComponent {
     }
   ];
 
-  // option: IOptions = {
-  //   animation: 'fixed'
-  // };
+  option: IOptions = {
+    animationType:  AnimationType.FIXED,
+    bulletType: BulletType.SQUARE,
+    timeBySlide: 4000
+  };
 
 }