arrows are not displayed on the images

idomiralin commented 5 years ago

Hello,

I cannot manage to add arrows or to have them visible (and the background-color is not a problem, because the images have different colors and on neither of them are the arrows visible). Did I do something wrong? Sorry if it isn't a bug.

I tried adding arrowPrevIcon and arrowNextIcon, but the arrows are not visible with or without these properties.

This is the code:

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

` this.galleryOptions = [ { thumbnails: false, preview: false, imageBullets: true, width: '300px', height: '200px', arrowPrevIcon: "fa fa-arrow-circle-o-left", arrowNextIcon: "fa fa-arrow-circle-o-right" }, //max-width 800 { breakpoint: 800, width: '200px', height: '170px' }, //max-width { breakpoint: 400 } ]

    this.galleryImages = [
      {
        small: 'assets/images/calendar/autumn.jpg',
        medium: 'assets/images/calendar/autumn.jpg',
        big: 'assets/images/calendar/autumn.jpg'
      },
      {
        small: 'assets/images/calendar/spring.jpg',
        medium: 'assets/images/calendar/spring.jpg',
        big: 'assets/images/calendar/spring.jpg'
      },
      {
        small: 'assets/images/calendar/summer.jpg',
        medium: 'assets/images/calendar/summer.jpg',
        big: 'assets/images/calendar/summer.jpg'
      },
      {
        small: 'assets/images/calendar/winter.jpg',
        medium: 'assets/images/calendar/winter.jpg',
        big: 'assets/images/calendar/winter.jpg'
      }
    ];
     }`

naveen554 commented 5 years ago

@idomiralin , you need to install "npm install --save font-awesome angular-font-awesome" and do some changes in your angular-cli.json

https://www.npmjs.com/package/angular-font-awesome

idomiralin commented 5 years ago

@naveen554 thank you, but now I can see two small boxes instead of arrows. Do you have any idea why?

These are the steps I followed:

npm install --save font-awesome angular-font-awesome
Import the FontAwesomeModule in app.module.ts
I added in angular.json (I am using angular 8): "styles": [ "src/styles.scss", "node_modules/font-awesome/scss/font-awesome.scss" ]

marcosrbertuol commented 5 years ago

any lucky ? Same problem here

marcosrbertuol commented 5 years ago

15 hours trying..... that's a shame, the gallery is great but I'm gonna have to move on from it

naveen554 commented 5 years ago

@idomiralin "node_modules/font-awesome/scss/font-awesome.scss" is this exact path ? i think "./node_modules/font-awesome/scss/font-awesome.scss" is the exact path and 2 places you need to add "node_modules/font-awesome/scss/font-awesome.scss" this in angular.json file . pls check this once and actually i think this is bug for updated angular versions >5

gitalvininfo commented 5 years ago

What I do is instead of pasting the font-awesome.css in angular.json I pasted it on my styles.scss like @import '~font-awesome/css/font-awesome.css'; and it works fine.

gitalvininfo commented 5 years ago

The '~' means it will tell angular to look for font-awesome inside the node_modules. In your case maybe your path is incorrect?

naveen554 commented 5 years ago

@gitalvininfo is arrows are displaying ?

gitalvininfo commented 5 years ago

Yes both arrows and close button displays but is there any solution that i could set the width of the preview? Thanks for response.

On Tue, 15 Oct 2019, 8:57 pm naveen554, notifications@github.com wrote:

is arrows are displaying ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/lukasz-galka/ngx-gallery/issues/276?email_source=notifications&email_token=ADNAKEHWHECNPE5EWQXCPLTQOW42DA5CNFSM4IVG7TSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBIUPRA#issuecomment-542197700, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADNAKEH42Q6QV6F6CF4SK5DQOW42DANCNFSM4IVG7TSA .

zigang93 commented 5 years ago

same issue here.. i am using angular 8

lukasz-galka / ngx-gallery

arrows are not displayed on the images #276