[英]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.