Search code examples
cssangularngx-gallery

ngx-gallery width and height options missing

I'm wondering, how to give ngx-gallery (https://github.com/MurhafSousli/ngx-gallery) a new height. It has a fixed value of 500px and changing the parent divs height is not changing anything.

I was looking either for some attribute in the template like this

<gallery
   [height] = '250px'>
</gallery>

Stackblitz: https://stackblitz.com/edit/angular-osh1vu

Followup-question: In the Stackblitz, the behaviour is fit-height (regarding the black background) and in my application it is fit-width, so the black stripes are above and under the image. How can i change this too? (which was possible on older? version , but is no more a valid attribute)

or

some css code (looking in the dev tools, the sliding images are labeled div.g-template.g-item-template), which is also not possible to overwrite:

div.g-template.g-item-template {
  height: 200px !important;
}
Solution

  • Demo add class to galery element

    <div class="basic-container">
    <h2>Gallery component</h2>
    <gallery class="custom"
    [items]="items"
    [dots]=true
    [thumb]=false
    [loop]=false
    [playerInterval] = 5000
    [autoPlay]=true
    [loadingStrategy]=preload>
  </gallery>
</div>

    in css change

    .custom{
height:200px;
}