Nativescript-ng2-carousel slider images fix the height and width of the image within the viewport


#1

I am using the nativescript-ng2-carousel for a slideshow.

Is it possible to make the slide images stay within the viewport? especially when there are some portrait images and some landscape. Currrently all the images a fixed width to the width of the viewport, which means that if the device is in landscape many of the images have the bottom cutoff.

Also can these be centered within the viewport?


#2

Post some code / attach a playground example, without that it’s hard to understand how you have have framed your layout. If you don’t use a ScrollView and let image to fill height of device it should work.


#3

Thank you for your response.
It’s inside a stacklayout that is in a GridLayout with rows="*"

  <StackLayout class="popUp" [visibility]="isSlideshow ? 'visible' : 'collapse'" row="0" verticalAlignment="center" horizontalAlignment="center">
        <GridLayout *ngIf="isSlideshow" [carousel]="images" rows="*" carouselLabelOverlay="true" carouselSpeed="2500">      </GridLayout>
  </StackLayout>

I managed to get it to work.
Apparently the styles for the slider have to be in the app.css file and not within the component stylesheets.
Perhaps there is something else in the project that stops the component styles from being used, but I it’s working now the way i need it with the styles in the app.css file.

I realised this after checking the demo app for the plugin and seeing where they had put the styles.

The styles i used:

.slider-image {
     height: 100%;
     max-width: 100%;
     width: auto;
}