[Fixed] Angular and ng-image-slider – show only one image a time

Issue

I am using ng-image-slider for sliding image in my app.
How can I control that only one image will appear besides changing the "imageSize" input and playing with the image width/height. I want it to be responsive.

This is my code-

        <ng-image-slider
            [images]="imageObject"
            [infinite]="true"
            [showArrow]="false"
            [autoSlide]="1">
        </ng-image-slider>

Thanks!

Solution

It looks like the amount of images shown is entirely relying on the size the containing slider element, meaning you need to know the size your image slider will take up, and make the imageSize fit that entire space (or use the space property).

If you choose to make the width of the image take the entire space, make sure the to either make the space property 0, or to take it into account when setting the width

Since the width would be fixed and images might have a different width:height ratio, I suggest using the manageImageRatio by setting it to true

Here is a Stackblitz example with the image filling the entire width.