ngx-галерея не отображает стрелку влево-вправо над изображением в Angular

Question

Я использую ngx-gallery для отображения галереи изображений. Хотя я установил для свойства стрелки отображаемого изображения значение true, стрелки на изображении не отображаются.

Я использую Angular 7. Это мой код файла gallery.ts:

 galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  ngOnInit(): void {

      this.galleryOptions = [
          {
              'previewCloseOnEsc': true,
              'previewKeyboardNavigation': true,
              'imageBullets': true,
              'imageAutoPlay': true,
              width: '100%',
              height: '400px',
              thumbnailsColumns: 4,
              imageAnimation: NgxGalleryAnimation.Slide
          },
          // max-width 800
          {
              breakpoint: 800,
              width: '100%',
              height: '600px',
              imagePercent: 90,
              thumbnailsPercent: 10,
              thumbnailsMargin: 20,
              thumbnailMargin: 20
          },
          // max-width 400
          {
              breakpoint: 400,
              preview: false
          }
      ];

      this.galleryImages = [
          {
              small: 'assets/1-small.png',
              medium: 'assets/1-medium.png',
              big: 'assets/1-big.png'
          },
          {
              small: 'assets/2-small.png',
              medium: 'assets/2-medium.png',
              big: 'assets/2-big.png'
          },
          {
              small: 'assets/3-small.png',
              medium: 'assets/3-medium.png',
              big: 'assets/3-big.png'
          },
          {
            small: 'assets/4-small.png',
            medium: 'assets/4-medium.png',
            big: 'assets/4-big.png'
        }
      ];
  }

Я также изменил CSS, как описано на каком-то форуме:

ngx-gallery /deep/ ngx-gallery-image .ngx-gallery-arrow {
  background-color: orangered;
}
ngx-gallery /deep/ ngx-gallery-thumbnails .ngx-gallery-arrow {
  background-color: orangered;
}
ngx-gallery /deep/ ngx-gallery-preview .ngx-gallery-arrow {
  background-color: orangered;
}

Это мой код gallery.html

<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

Answer 1

ngx-gallery нужен шрифт, чтобы отобразить значок стрелки влево-вправо.Попробуйте включить их в свой файл angular-cli.json.в соответствии с их документацией вы можете включить их следующим образом:

"styles": [
...
"../node_modules/font-awesome/css/font-awesome.css"

]

Вы также можете включить font-awesome.css непосредственно в файл index.html.

Такжевключите hammer.js для салфетки.импортируйте в ваш модуль вот так

npm install hammerjs --save

import 'hammerjs';

вам также может понадобиться начальная загрузка для правильного использования ngx-галереи.