1

I'm trying to change the number of items that the carousel displays in runtime, the reason of this is that my page support small devices like smartphones, my idea is to display only 2 item per slide when a user sees the page in his/her smartphone but every time that I change the value attached to the itemsPerSlide of the carousel, it doesn't change at all, Am I doing something wrong, you can test this behavior in the next stackbizz - Change items per slide demo

Geuis
  • 37,442
  • 53
  • 145
  • 213
Alexisvt
  • 581
  • 1
  • 4
  • 9
  • Hi! Reading from what you trying to achieve can be done at compile by targeting device or is that not an option for u? – Lucho Jan 15 '20 at 21:23
  • Well that might be an option but can you share an example of your point to see it more clearly? Thanks – Alexisvt Jan 16 '20 at 02:57
  • your link is broken – benshabatnoam Aug 26 '20 at 08:46
  • you are correct, `itemsPerSlide` property affects the carousel only at initialization, hence if the value changes nothing happens. This is a bummer I do agree. There is [an open issue](https://github.com/valor-software/ngx-bootstrap/issues/5723) in ngx-bootstrap repository, please vote up. – benshabatnoam Aug 26 '20 at 08:54

1 Answers1

0

If you want to detect for mobile or desktop you can use navigator.userAgent API (other approaches) at compile time instead of changing it at runtime. Here's a working fork example that i tried out on an iOS device using following TS:

private mobileDevice(): boolean {
  return navigator.userAgent.match(/Android/i)
    ||  navigator.userAgent.match(/webOS/i)
    ||  navigator.userAgent.match(/iPhone/i)
    ||  navigator.userAgent.match(/iPad/i)
    ||  navigator.userAgent.match(/iPod/i)
    ||  navigator.userAgent.match(/BlackBerry/i)
    ||  navigator.userAgent.match(/Windows Phone/i)
    ? true : false;
}

However if desired to make this work by toggling during runtime as ngx-bootstrap carousel doesn't seem to work just by changing the input itemsPerSlide, one could try to destroy the node and then inject a new carousel with the help of ViewChild and TemplateRef API.

Try read this post, unless you can't figure it out let me know for a solution.

Lucho
  • 1,148
  • 1
  • 9
  • 21