gpt4 book ai didi

css - ngx-gallery 不在 Angular 中的图像上显示左右箭头

转载 作者:行者123 更新时间:2023-11-28 14:08:40 27 4
gpt4 key购买 nike

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

您可能还需要 bootstrap 才能正确使用 ngx-gallery。

关于css - ngx-gallery 不在 Angular 中的图像上显示左右箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56848231/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com