I have a Carousel widget which is populated by a list.
I set the list to have max records 10, and 10 items appear in the carousel.
However the navigation dots also display 10, no matter what value i chose for "ItemsPerSlide"
The navigation arrows also display incorrectly, matching the dots. For example:
If I have 5 items per row, and each arrow press cycles through 1 item, then there should only be 6 dots. Likewise the right arrow should only be able to be pressed 5 times, however this is not the case either.
This is the carousel displaying at the end of the list:
As you can see there are still 4 other dots and the right arrow is still selectable, but pressing it just cycles through the dots. The user then needs to cycle back through 4 presses before the items start moving again on the return.
This is the same regardless of whether the carousel is inside a web block / accordion item or just on the main page.
In previous version of OutSystems UI, there was the ability to update the carousel widget after changes etc which prevented this.
Please see attached oml file to demonstrate the issue.
Hi @Christopher Robin-Kennedy,
This is not an issue, it's is how the new Splide library used works, it creates a pagination dot for every Carousel item.
The library doesn't allow to change this by default, but you can workaround this. It's not very straightforward or ideal, but it should work, without going into JavaScript
I attached the oml with this solution.
Best regards,
Bernardo Cardoso
I am not sure that this is what should be expected behaviour.
Are we meant to only show one item per slide on our carousels? Perhaps this works for mobile implementations of this widget, but on web it doesnt behave as a user would expect.
Appreciate the work around though. Though may be more difficult if the itemsperslide is dynamic/in a variable that the user can change. Not sure if this will also affect the navigation arrows too but I will investigate further.
Perhaps I need to look at redesigning this with a Gallery list component to have similar functionality.
Hello @Christopher Robin-Kennedy
In order to clarify any additional questions or to see the available options you can take a look at the documentation of the underlying provider that the new version of the carousel uses - Splide.
Cheers,GM
Hi Christopher,
I had a try of your demo, yes, I can see the same thing happening.
I do personally think that 10 dots might be intended and oke, i would like either a dot representing each item (so 10) or a dot representing each 'page' (so 2), but 6 dots seems odd to me.
Also dragging the slides instead of using the arrows works ok, when I drag to the end, it fast forwards to the last dot, and when dragging back to earlier slides, it fast backwards to 5th spot, so no lagging drags or anything.
So the biggest fault I find with the arrows, just like with the dragging, it should recognise at the point where you scroll to slide total - slidesperpage+1, there is no further to scroll and disable the arrow to go further. Wheter it should also 'jump' to the last dot like when you are dragging to the end is a matter of taste. I think probably I wouldn't want to have all 3 methods of going through them active at the same time, I don't see much value in the dots, personally.
This is not something anyone here can solve, I think, it is a bug as far as I'm concerned.
What do you mean by 'update the carousel widget after changes' ? Have you seen the Initialized event on the widget. If you handle that event, you can make use of some provided client actions to finetune how you want your carousel to work.
I just had a quick glance, and didn't find anything here that could help with the problem, or that allows you to define how many dots should be used. I tried to not show the dots or arrows, make my own left and right arrows to work with the provided actions CarouselNext and CarouselPrevious, so I can control when the arrows are available myself, but it didn't work, nothing happens when I call those actions, maybe you have better luck.
Dorine
@Gonçalo Martins
I ran into the same issue and agree that there should be a cleaner way to have the dots below the carousel match the number of pages.
I've looked into the documentation of the provider, and it looks like the behavior we're trying to achieve is listed as an example on Splide's homepage:
By clicking "Code", we can check that the property used to set this behavior is actually the "perPage" property:
I found another post that mentions a similar issue and noticed that you've suggested using the SetSplideConfings action on the Initialized event of the carousel to set the "perMove" property, so I tried using the same action to set the "perPage" property.
However, I noticed that there isn't a match to this property on the input's structure:
Is it possible to add the "perPage" property to the SetSplideConfings action? Or, preferably, add an ItemsPerPage input to the carousel itself that, similarly to the ItemsPerSlide, allows to set different items per page for desktop, tablet or phone?
Thanks,
Inês Carvalho