arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 18:00:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Carousel): expose methods to allow autoplay

Browse Source 
Resolves #1300
This commit is contained in:
Benjamin Canac
2024-02-01 18:07:39 +01:00
parent f36158133e
commit 41ecd2a3d5
3 changed files with 86 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/content/2.components/carousel.md
View File

@@ -100,6 +100,12 @@ The number of indicators will be automatically generated based on the number of
:component-example{component="carousel-example-indicators-size"}
## Autoplay
You can easily implement an autoplay behavior using the exposed [API](#api) through a template ref.
:component-example{component="carousel-example-autoplay"}
## Slots
### `default`
@@ -120,7 +126,7 @@ You can customize the position of the buttons through `ui.arrows.wrapper`.
### `indicator`
With the `indicators` prop enabled, use the `#indicator` slot to set the content of the indicators. You will have access to the `active`, `index` properties and `on-click` method in the slot scope.
With the `indicators` prop enabled, use the `#indicator` slot to set the content of the indicators. You will have access to the `active`, `page` properties and `on-click` method in the slot scope.
:component-example{component="carousel-example-slots-indicator"}
@@ -132,6 +138,28 @@ You can customize the position of the buttons through `ui.indicators.wrapper`.
:component-props
## API
When accessing the component via a template ref, you can use the following:
::field-group
::field{name="page" type="number"}
The current page.
::
::field{name="pages" type="number"}
The total number of pages.
::
::field{name="select (page)"}
Go to a specific page.
::
::field{name="next ()"}
Go to the next page.
::
::field{name="prev ()"}
Go to the previous page.
::
::
## Config
:component-preset