Carousel does not respond to change to numVisible

[mconner]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
(^^^^^^^ btw you might want to fix this to "Stackblitz"):
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

I forked the stackblitz example provided by your Carousel documentation, instead:
https://stackblitz.com/edit/primeng-carousel-demo-yivym8

Current behavior

If I change the numVisible programatically, the carousel advances correctly (i.e: the correct proportion of the carousel), but the item size style is was not updated, so only part of the next item is show.

Expected behavior

When the numVisible changes, it should adjust the style for the .ui-carousel-item accordingly.

Minimal reproduction of the problem with instructions

1. Using the provided example, click on the "Visible" at the top. It will go from "Visible: 1" to "Visible: 2", but still only shows 1 item.
2. Advance the Basic example, and note that it moves only halfway.
3. For each click of visible (which cycles numVisible values from 1 to 4), the advance becomes 1/numVisible of the carousel, as would be expected, but the style is not updated so the items are still the full width.

Workaround: adding the following to the method that cycles the numVisible seems to fix the problem:

      setTimeout(()=> {
        this.basicCarousel.setCloneItems();
        this.basicCarousel.createStyle();
        //this.basicCarousel.calculatePosition();
      });

Uncomment this in the example to see why (the calculatePosition doesn't seem to be necessary).

EDIT: I discovered after initially posting this that the setCloneItems is necessary if the numScroll is not 1. Otherwise, the advance of the carousel is messed up. Exactly what is going on, I don't know. you get a blank carousel page. Try the example without it to see what I mean.

What is the motivation / use case for changing the behavior?

In general, component @Input values should respond to changes to their value.
In my specific case, I have a widget that is part of a larger dashboard. The widget size may change, based on the layout, and the responsive breakpoints won't help, because the screen size is not changing, but the size of the carousel is. So I'll have to monitor the widget width and adjust the numVisible accordingly.

Please tell us about your environment:

Win10 IntelliJ

• Angular version: 9.X

• PrimeNG version: 9.X

• Browser: [Chrome 84.0.4147.89 IE 11 ]

• Language: [TypeScript X.X ]

• Node (for AoT issues): node --version = 8.9.5

[mconner]

As an aside, the way the advance and the page dots on the bottom work seems wrong (in my opinion). A carousel goes round and round, The primeng carousel resets when it gets to the end, even when circular = true

• If I have a [value] with 10 items, i0-i9, in the carousel, and a numVisible of 3, and a numScroll of 3, and get to the 3rd page, it shows i6-i8, as expected. However, the next scroll only scrolls 1 item, showing i7-i9. IMO, It should always scroll 3, showing items i9, i0, and i1. That is, the scroll should wrap smoothly, at least for circular=true .
• The arrows for prev and next would likewise always advance (or retreat) by numScroll, regardless of position in the list.
• The dots at the bottom, on the other hand, should be pages (i.e.: value.length/numVisible). They are currently scrolls (i.e.: value.length/numScrolls). Clicking on each dot should position the carousel such that the first visible item is at index dotIndex * numVisible. Again, this means that the last page may include items from the beginning of the list.

[tiagomartins91]

The bug is not fixed in release 10.0.0-rc.1. Try it on the new primeNG demo page.

[sgpatel5]

Is this bug being fixed anytime soon?

[MrTaiji]

For myself I implemented a workaround, maybe it will help you:

place an *ngIf="condition" on the carousel, whenever you switch values, negate the condition beforehands and set it to true afterwards.

The reinitialization of the component, causes the carousel to load the parameters again.