Added option to Hide the navigation arrows and pins

README.md

@@ -29,7 +29,7 @@ imports: [CarouselModule]
 
 **component template:**
 
-add carousel and container 
+add carousel and container
 ```
 <div style="width: 800px; height: 400px">
   <carousel [sources]="imageSources" [config]="config"></carousel>
@@ -39,7 +39,7 @@ add carousel and container
 <br/>
 
 **component ts:**
- 
+
 ```
 import { ICarouselConfig, AnimationConfig } from 'angular4-carousel';
 ```
@@ -51,24 +51,25 @@ public imageSources: string[] = [
      'path to img2',
      'path to img3'
   ];
-  
+
   public config: ICarouselConfig = {
     verifyBeforeLoad: true,
     log: false,
     animation: true,
     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.**
 ```
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 ```
 (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_ <br/>
@@ -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:_ <br/>
+values: false, true
+Hides the Navigation arrows and the pins
+
 ## API
 
 You can catch event on image loaded <br/>
@@ -122,4 +127,3 @@ this.x.onImageLoad().subscribe(
       () => console.log('all imgs loaded')
     )
 ```
-

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
   };
 }

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();
   }

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'">
   </carousel-pins>
 
   <carousel-arrows
     *ngIf="galleryLength > 1"
-    (changeSlide)="onChangeSlide($event);"></carousel-arrows>
+    (changeSlide)="onChangeSlide($event);" [style.visibility]="hideElement ? 'hidden' : 'none'"></carousel-arrows>
 </div>

src/app/services/declarations/index.ts

@@ -8,4 +8,5 @@ export interface ICarouselConfig {
   autoplay: boolean;
   autoplayDelay: number;
   stopAutoplayMinWidth: number;
+  hideNavElements: boolean;
 }