ngx-gallery 未在 Angular 中的图像上显示左右箭头答案

【问题标题】：ngx-gallery not displaying left-right arrow over image in Angularngx-gallery 未在 Angular 中的图像上显示左右箭头
【发布时间】：2021-01-16 16:29:51
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： css angular ngx-gallery

【解决方案1】：

ngx-gallery 需要 font awesome 来显示左右箭头图标。尝试将它们包含在您的 angular-cli.json 文件中。根据他们的文档，您可以像这样包含它们

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

]

您也可以直接在 index.html 文件中包含 font-awesome.css。

还包括用于滑动的锤子.js。像这样导入你的模块

npm install hammerjs --save

import 'hammerjs';

您可能还需要引导程序才能正确使用 ngx-gallery。

【讨论】：

我添加了 bootstrap 和 font-awesome，现在它可以工作了。我可以看到箭头。非常感谢
确保在“test”和“build”下的angular.json样式中添加"./node_modules/font-awesome/css/font-awesome.css"
是否可以使用素材图标代替 font-awesome？
@pankaj 你可以使用自定义背景图片

【解决方案2】：

我解决了

@import url(../node_modules/font-awesome/css/font-awesome.css);

在“styles.css”中

【讨论】：