[英]ngx-gallery not displaying left-right arrow over image in Angular
我正在使用 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>
ngx-gallery 需要字体真棒来显示左右箭头图标。 尝试将它们包含在您的 angular-cli.json 文件中。 根据他们的文档,您可以像这样包含它们
"styles": [
...
"../node_modules/font-awesome/css/font-awesome.css"
]
您还可以直接在 index.html 文件中包含 font-awesome.css。
还包括用于滑动的hammer.js。 像这样导入你的模块
npm install hammerjs --save
import 'hammerjs';
您可能还需要引导程序才能正确使用 ngx-gallery。
我解决了使用
@import url(../node_modules/font-awesome/css/font-awesome.css);
在“styles.css”中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.