Change the amount of cards shown on smaller resolutions

[waterlooblue]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X ] feature request

Browser and Version?

Chrome 61.0.3163.100 (Official Build) (64-bit)

Framework Versions

node: 8.0.26 npm: 3.10.10 Angular: 4.1.2

Repro steps

The log given by the failure

Desired functionality

Hi, I'm looking to use this on a responsive application. It works well on desktop when I set the cards to 3, but on mobile (less than 960px) I would like to set it to 1.

Do you have a way that I can change a number of cards based on media query?

Mention any other details that might be useful

[crutchcorn]

You could do something like this:

<ngx-slideshow #carousel [cards]="cards" [cardSize]="'350px'" [padding]="'14px'">
</ngx-slideshow>

cards = 3;

@HostListener('window:resize', ['$event'])
onResize(event) {
  if (event.target.innerWidth < 960px) this.cards = 1;
  else this.cards = 3;
}

The library will handle any input changes made by Angular component logic

[waterlooblue]

Thanks! I used that in my solution.

export class CarouselComponent implements OnInit {
    private innerWidth: number;
    private cardResize: string;
    private shownCards: number;

    @HostListener('window:resize', ['$event'])
     onResize(event) 
     {
        this.innerWidth = event.target.innerWidth;
        this.carouselSize();
    }

    ngOnInit(): void 
    {
        this.innerWidth = window.innerWidth;
        this.carouselSize();
    }

    carouselSize()
    {
        if (this.innerWidth < 656)
        {
            this.shownCards = 1;
            this.cardResize = '100%';
        }
        else if (this.innerWidth < 976)
        {
            this.shownCards = 2;
            this.cardResize = '302px';
        }
        else if (this.innerWidth < 1280)
        {
            this.shownCards = 2;
            this.cardResize = '402px';
        }
        else
        {
            this.shownCards = 3;
            this.cardResize = '402px';
        }
    }
}

[crutchcorn]

I was expecting that to be what the code generally would look like. Glad you were able to find a solution!