diff --git a/README.md b/README.md
index 1e44500..2d7ddb9 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ imports: [CarouselModule]
**component template:**
-add carousel and container
+add carousel and container
```
@@ -39,7 +39,7 @@ add carousel and container
**component ts:**
-
+
```
import { ICarouselConfig, AnimationConfig } from 'angular4-carousel';
```
@@ -51,7 +51,7 @@ public imageSources: string[] = [
'path to img2',
'path to img3'
];
-
+
public config: ICarouselConfig = {
verifyBeforeLoad: true,
log: false,
@@ -59,16 +59,17 @@ public imageSources: string[] = [
animationType: AnimationConfig.SLIDE,
autoplay: true,
autoplayDelay: 2000,
- stopAutoplayMinWidth: 768
+ stopAutoplayMinWidth: 768,
+ hideNavElements: false;
};
```
-
-**Add font awesome to your project.**
+
+**Add font awesome to your project.**
```
```
(you can add font awesome using CLI or directly or CDN, or whatever you want, or redefine default styles for arrows ;) with pure CSS )
-
+
## Config
_verifyBeforeLoad_
@@ -98,6 +99,10 @@ values: [number] (px)
Prop for preventing autoplay on mobile devices.
If window width (w/o scroll) <= value, autoplay will stop.
+_hideNavElements:_
+values: false, true
+Hides the Navigation arrows and the pins
+
## API
You can catch event on image loaded
@@ -122,4 +127,3 @@ this.x.onImageLoad().subscribe(
() => console.log('all imgs loaded')
)
```
-
diff --git a/src/app/components/app.component.ts b/src/app/components/app.component.ts
index 23765e5..98f16fa 100644
--- a/src/app/components/app.component.ts
+++ b/src/app/components/app.component.ts
@@ -23,6 +23,7 @@ export class AppComponent {
animationType: AnimationConfig.SLIDE,
autoplay: true,
autoplayDelay: 2000,
- stopAutoplayMinWidth: 768
+ stopAutoplayMinWidth: 768,
+ hideNavElements: false
};
}
diff --git a/src/app/components/carousel/carousel.component.ts b/src/app/components/carousel/carousel.component.ts
index 8d8d156..58ae35a 100644
--- a/src/app/components/carousel/carousel.component.ts
+++ b/src/app/components/carousel/carousel.component.ts
@@ -22,15 +22,16 @@ export class CarouselComponent implements OnInit, OnDestroy {
private autoplayIntervalId;
private preventAutoplay: boolean;
-
public loadedImages: string[];
public galleryLength: number;
public currentSlide = 0;
+ public hideElement: boolean;
constructor(private carouselService: CarouselService, private windowWidthService: WindowWidthService) { }
ngOnInit() {
this.initData();
+ this.hideElement = this.config.hideNavElements;
}
public initData() {
@@ -110,7 +111,6 @@ export class CarouselComponent implements OnInit, OnDestroy {
if (!this.config.animation) {
return;
}
-
this.carouselArrowsComponent.disableNavButtons();
this.pinsComponent.disableNavButtons();
}
diff --git a/src/app/components/carousel/carousel.template.html b/src/app/components/carousel/carousel.template.html
index cc76a9c..7860ff9 100644
--- a/src/app/components/carousel/carousel.template.html
+++ b/src/app/components/carousel/carousel.template.html
@@ -10,10 +10,12 @@
*ngIf="galleryLength > 1"
[images]="loadedImages"
[currentSlide]="currentSlide"
- (changeSlide)="onChangeSlideIndex($event);">
+ (changeSlide)="onChangeSlideIndex($event);"
+ [hideElement]="hideElement"
+ [style.visibility]="hideElement ? 'hidden' : 'none'">
1"
- (changeSlide)="onChangeSlide($event);">
+ (changeSlide)="onChangeSlide($event);" [style.visibility]="hideElement ? 'hidden' : 'none'">
diff --git a/src/app/services/declarations/index.ts b/src/app/services/declarations/index.ts
index 1212c6a..594708b 100644
--- a/src/app/services/declarations/index.ts
+++ b/src/app/services/declarations/index.ts
@@ -8,4 +8,5 @@ export interface ICarouselConfig {
autoplay: boolean;
autoplayDelay: number;
stopAutoplayMinWidth: number;
+ hideNavElements: boolean;
}