From bbeabac8892dec567633d5c50690bfab4be6423a Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Mon, 19 Aug 2024 13:26:31 +0300 Subject: [PATCH 1/7] docs(carousel): add wc topic --- .../WebComponents/webInputs.JS.wc.apiMap.json | 41 +++ doc/en/components/layouts/carousel.md | 346 ++++++++++++++++++ docConfig.json | 3 + docfx/en/components/toc.json | 6 + 4 files changed, 396 insertions(+) create mode 100644 doc/en/components/layouts/carousel.md diff --git a/apiMap/WebComponents/webInputs.JS.wc.apiMap.json b/apiMap/WebComponents/webInputs.JS.wc.apiMap.json index 06f8ee3c0..0703a09e1 100644 --- a/apiMap/WebComponents/webInputs.JS.wc.apiMap.json +++ b/apiMap/WebComponents/webInputs.JS.wc.apiMap.json @@ -17,6 +17,9 @@ "igc-card-header-module.ts", "igc-card-media-module.ts", "igc-card-module.ts", + "igc-carousel-module.ts", + "igc-carousel-indicator-module.ts", + "igc-carousel-slide-module.ts", "igc-checkbox-base-module.ts", "igc-checkbox-module.ts", "igc-chip-module.ts", @@ -1721,6 +1724,44 @@ {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "elevated"}], "originalName": "Elevated"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, + { + "originalName": "Carousel", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-carousel-component.ts","mappedName": "IgcCarouselComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "skipLoop"}], "originalName": "SkipLoop"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "skipIndicator"}], "originalName": "SkipIndicator"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "skipNavigation"}], "originalName": "SkipNavigation"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "skipPauseOnInteraction"}], "originalName": "SkipPauseOnInteraction"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "vertical"}], "originalName": "Vertical"}, + {"names":[{"platform": "WebComponents", "mappedType": "number","mappedName": "interval"}], "originalName": "Interval"}, + {"names":[{"platform": "WebComponents", "mappedType": "number","mappedName": "maximumIndicatorsCount"}], "originalName": "MaximumIndicatorsCount"}, + {"names":[{"platform": "WebComponents", "mappedType": "CarouselIndicatorsOrientation","mappedName": "indicatorsOrientation"}], "originalName": "IndicatorsOrientation"}, + {"names":[{"platform": "WebComponents", "mappedType": "CarouselAnimationsType","mappedName": "animationsType"}], "originalName": "AnimationsType"} ] + }, + { + "originalName": "Slide", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-carousel-slide-component.ts","mappedName": "IgcCarouselSlideComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"} ] + }, + { + "originalName": "Indicator", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-carousel-indicator-component.ts","mappedName": "IgcCarouselIndicatorComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] + }, { "originalName": "Checkbox", "originalNamespace": "Infragistics.Controls", diff --git a/doc/en/components/layouts/carousel.md b/doc/en/components/layouts/carousel.md new file mode 100644 index 000000000..b48c384c4 --- /dev/null +++ b/doc/en/components/layouts/carousel.md @@ -0,0 +1,346 @@ +--- +title: {Platform} Carousel | Infragistics +_description: Use {ProductName} Carousel component to navigate through a collection of slides, cards or page-based interfaces with endless programmatic features. Try it now +_keywords: {ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Carousel component, {Platform} Carousel control +mentionedTypes: ['Carousel'] +--- + +# {Platform} Carousel Overview +The {ProductName} Carousel is a responsive, lightweight component that provides the most flexible way to create slideshow-like web experience for users who navigate back and forth through a collection of images with text slides, links, and other html elements. + +The {Platform} Carousel component allows you to use animations, slide transitions, and customization so you can easily tweak the interface and build {Platform} custom carousel. + +## {Platform} Carousel Example +The {Platform} Carousel demo you see below shows slides containing only images. + +`sample="/layouts/carousel/overview", height="500", alt="{Platform} Carousel Overview Example"` + +## Usage + + +First, you need to install the {ProductName} by running the following command: + +```cmd +npm install {PackageWebComponents} +``` + +You will then need to import the `Carousel`, its necessary CSS, and register its module, like so: + +```ts +import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents"; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcCarouselComponent); +``` + + +For a complete introduction to the {ProductName}, read the [*Getting Started*](../general-getting-started.md) topic. + +Now that you have the {ProductName} Carousel imported, you can start with a basic configuration of the `Carousel` and its slides. + +Use the `Carousel` selector to wrap your `Slide`s. The slides may feature any valid html content inside, including other components. + +```html + + + + + + + + + + + +``` + +If you want a slide to be active by default, use the `Active` attribute: + +```html + + ... + + ... + + + ... + + +``` + +>[!NOTE] +>If no active slide is set, the first one will be set by default. If there are multiple active slides on initial rendering or subsequent updates, only the last one will be taken into account. + +## Examples + +### Carousel Configuration + +By default, the `Carousel` has its `SkipLoop` property set to **false** (*looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action*). The looping behavior can be disabled by setting the value of the `SkipLoop` property to **true**. + +```html + + ... + +``` + +To keep track of each slide index, the carousel has indicators that are positioned at the `end` of the carousel by default. In order to change this behavior, use the `IndicatorsOrientation` property and assign it to `start`. + +```html + + ... + +``` + +By default, the `Carousel` displays its navigation buttons and indicators. Use the `SkipIndicator` property to hide the indicators and the `SkipNavigation` property to hide the navigation buttons. + +```html + + ... + +``` + +The `Carousel` supports vertical mode. Use the `Vertical` property to enable it. + +```html + + ... + +``` + +### Custom indicators + +To add {Platform} custom carousel indicators, use the `Indicator`: + +```html + + + 🤍 + ❤️ + + + 🤍 + ❤️ + + + + + + + + + +``` + +The {ProductName} Carousel component allows users to use different elements for the active and inactive state of a single indicator. It is mandatory to provide 2 elements for each slot (empty and active) when declaring an indicator, even if they are the same. + + +### Custom navigation buttons + +To achieve this we will use the `previous-button` and `next-button` slots: + +```html + + + + ... + +``` + +### Slide containing other components + +This carousel is going to contain slides with forms and images: + +```html + + +
+ +
+ + + + + + + Sign In +
+
+ + +
+ +
+ + + + Search +
+
+ + +``` + +#### Demo + +`sample="/layouts/carousel/components", height="600", alt="{Platform} Carousel With Components Example"` + + +## Animations + +Animated slide transitions provide the end-users a nice experience when interacting with the carousel. + +The carousel is configured to use the `slide` animation by default but it also supports `fade` as an alternative animation. + +Use the `AnimationsType` property to change the animation. + +```html + + ... + +``` + +Setting `none` to the `AnimationType` property disables the animations. + +### Demo + +The demo below demonstrates the different types of animations, which the carousel supports. + +`sample="/layouts/carousel/animations", height="650", alt="{Platform} Carousel Animations Example"` + + +## Navigation + +Transition and navigation are the most important carousel features. + +The navigation in the carousel can be handled by interacting with the navigation buttons and indicators. + +### Keyboard navigation + +* Navigation buttons + * `Space`/`Enter` key - navigates to the next/previous slide. +* Indicators + * `Arrow Left` key - navigates to the previous (next in Right-to-Left mode) slide. + * `Arrow Right` key - navigates to the next (previous in Right-to-Left mode) slide. + * `Home` key - navigates to the first (last in Right-to-Left mode) slide. + * `End` key - navigates to the last (first in Right-to-Left mode) slide. + +### Automatic transitioning + +The `Carousel` can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the `Interval` property, which determines the amount of time in milliseconds between slides transition. + +>[!NOTE] +>Hovering the mouse over any carousel content or moving keyboard focus to any of the carousel content pauses automatic transitioning. Automatic transitioning resumes when the mouse moves away from the carousel or when keyboard focus moves out of the carousel content. +This can be prevented by setting `SkipPauseOnInteraction` property to **true**. + +```html + + ... + +``` + +## Advanced Example + +Let's create a fully automated carousel with looping enabled. We will configure the indicators to be a thumbnail representation of each slide. + + +To achieve this goal, we have to do the following configurations to the carousel: + - enable the `SkipPauseOnInteraction` property + - enable the `SkipNavigation` property + - enable the `Vertical` property + - add transition `Interval` + - add custom `Indicator` for each slide + +Our carousel will look like this in the template: + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +These configurations will have the following result: + +`sample="/layouts/carousel/thumbnail", height="600", alt="{Platform} Carousel Thumbnail Example"` + + +## Accessibility + +### WAI-ARIA Roles, States, and Properties + * The Carousel base element role is [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) - section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily. + * Carousel indicators are with role [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) - grouping label providing a mechanism for selecting the tab content that is to be rendered to the user + * The element that serves as the container for the set of tabs (carousel indicators) is with role [`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist). + * Each slide element is set with role [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel). + +### ARIA support +#### Carousel component +* **Attributes** + * [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) set to "carousel". + * [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: **off** and **polite**. The default setting is **polite** and is set to the element that serves as the container for the set of slides. When the `Interval` option is set and the carousel is in playing state, the **aria-live** attribute would be set to **off**. + * [aria-label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) (navigation buttons) - "Previous slide"/"Next slide". + +#### Slide component +* **Attributes** + * id - follows the pattern "igc-carousel-slide-${incremented_number}". + * [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) set to "slide". + * [aria-label](https://www.w3.org/TR/wai-aria/#aria-label) follows the pattern "${index + 1} of ${total}". + +#### Indicator component +* **Attributes** + * [aria-label](https://www.w3.org/TR/wai-aria/#aria-label) follows the pattern "Slide ${index + 1}" + * [aria-selected](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) set to **true** or **false** based on the active slide. + + +## API References + +- `Carousel` +- `Slide` +- `Indicator` +- `Icon` +- `Input` +- `Button` + +## Additional Resources + +* [{ProductName} **Forums**]({ForumsLink}) +* [{ProductName} **GitHub**]({GithubLink}) diff --git a/docConfig.json b/docConfig.json index d1a7d53fc..a13e97929 100644 --- a/docConfig.json +++ b/docConfig.json @@ -431,6 +431,9 @@ "CardHeader", "CardMedia", "CardComponent", + "CarouselComponent", + "CarouselIndicatorComponent", + "CarouselSlideComponent", "CheckboxComponent", "CheckboxBase", "ChipComponent", diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index edc97a433..8b58316c2 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -1474,6 +1474,12 @@ "name": "Card", "href": "layouts/card.md" }, + { + "exclude": ["Angular", "Blazor", "React"], + "name": "Carousel", + "href": "layouts/carousel.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "Dock Manager", From 39295b102fcdadde0fdc09b15b604d126e900fb2 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Thu, 26 Sep 2024 19:33:58 +0300 Subject: [PATCH 2/7] docs(carousel): update properties --- .../WebComponents/webInputs.JS.wc.apiMap.json | 10 ++--- doc/en/components/layouts/carousel.md | 38 +++++++++++-------- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/apiMap/WebComponents/webInputs.JS.wc.apiMap.json b/apiMap/WebComponents/webInputs.JS.wc.apiMap.json index a8266273b..15ea16a8d 100644 --- a/apiMap/WebComponents/webInputs.JS.wc.apiMap.json +++ b/apiMap/WebComponents/webInputs.JS.wc.apiMap.json @@ -1699,15 +1699,15 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-carousel-component.ts","mappedName": "IgcCarouselComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "skipLoop"}], "originalName": "SkipLoop"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "skipIndicator"}], "originalName": "SkipIndicator"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "skipNavigation"}], "originalName": "SkipNavigation"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "skipPauseOnInteraction"}], "originalName": "SkipPauseOnInteraction"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "disableLoop"}], "originalName": "DisableLoop"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "hideIndicators"}], "originalName": "HideIndicators"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "hideNavigation"}], "originalName": "HideNavigation"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "disablePauseOnInteraction"}], "originalName": "DisablePauseOnInteraction"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "vertical"}], "originalName": "Vertical"}, {"names":[{"platform": "WebComponents", "mappedType": "number","mappedName": "interval"}], "originalName": "Interval"}, {"names":[{"platform": "WebComponents", "mappedType": "number","mappedName": "maximumIndicatorsCount"}], "originalName": "MaximumIndicatorsCount"}, {"names":[{"platform": "WebComponents", "mappedType": "CarouselIndicatorsOrientation","mappedName": "indicatorsOrientation"}], "originalName": "IndicatorsOrientation"}, - {"names":[{"platform": "WebComponents", "mappedType": "CarouselAnimationsType","mappedName": "animationsType"}], "originalName": "AnimationsType"} ] + {"names":[{"platform": "WebComponents", "mappedType": "CarouselAnimationType","mappedName": "animationType"}], "originalName": "AnimationType"} ] }, { "originalName": "Slide", diff --git a/doc/en/components/layouts/carousel.md b/doc/en/components/layouts/carousel.md index b48c384c4..a5478021d 100644 --- a/doc/en/components/layouts/carousel.md +++ b/doc/en/components/layouts/carousel.md @@ -43,13 +43,13 @@ Use the `Carousel` selector to wrap your `Slide`s. The slides may feature any va ```html - + - + ``` @@ -75,10 +75,10 @@ If you want a slide to be active by default, use the `Active` attribute: ### Carousel Configuration -By default, the `Carousel` has its `SkipLoop` property set to **false** (*looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action*). The looping behavior can be disabled by setting the value of the `SkipLoop` property to **true**. +By default, the `Carousel` has its `DisableLoop` property set to **false** (*looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action*). The looping behavior can be disabled by setting the value of the `DisableLoop` property to **true**. ```html - + ... ``` @@ -91,10 +91,10 @@ To keep track of each slide index, the carousel has indicators that are position ``` -By default, the `Carousel` displays its navigation buttons and indicators. Use the `SkipIndicator` property to hide the indicators and the `SkipNavigation` property to hide the navigation buttons. +By default, the `Carousel` displays its navigation buttons and indicators. Use the `HideIndicators` property to hide the indicators and the `HideNavigation` property to hide the navigation buttons. ```html - + ... ``` @@ -136,7 +136,7 @@ The {ProductName} Carousel component allows users to use different elements for ### Custom navigation buttons -To achieve this we will use the `previous-button` and `next-button` slots: +To achieve this, use the `previous-button` and `next-button` slots: ```html @@ -189,9 +189,9 @@ This carousel is going to contain slides with forms and images: Animated slide transitions provide the end-users a nice experience when interacting with the carousel. -The carousel is configured to use the `slide` animation by default but it also supports `fade` as an alternative animation. +The carousel is configured to use the `slide` animation by default, but it also supports `fade` as an alternative animation. -Use the `AnimationsType` property to change the animation. +Use the `AnimationType` property to change the animation. ```html @@ -212,7 +212,13 @@ The demo below demonstrates the different types of animations, which the carouse Transition and navigation are the most important carousel features. -The navigation in the carousel can be handled by interacting with the navigation buttons and indicators. +The navigation in the carousel can be handled by the user through navigation buttons, indicators, keyboard navigation and touch interaction on mobile devices. + +### Touch gestures + +By default, the carousel can be used on any touch-enabled device. + +The carousel [animations](carousel.md#animations) are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications ([PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)). ### Keyboard navigation @@ -230,10 +236,10 @@ The `Carousel` can be easily configured to change the slides automatically, with >[!NOTE] >Hovering the mouse over any carousel content or moving keyboard focus to any of the carousel content pauses automatic transitioning. Automatic transitioning resumes when the mouse moves away from the carousel or when keyboard focus moves out of the carousel content. -This can be prevented by setting `SkipPauseOnInteraction` property to **true**. +This can be prevented by setting `DisablePauseOnInteraction` property to **true**. ```html - + ... ``` @@ -244,8 +250,8 @@ Let's create a fully automated carousel with looping enabled. We will configure To achieve this goal, we have to do the following configurations to the carousel: - - enable the `SkipPauseOnInteraction` property - - enable the `SkipNavigation` property + - enable the `DisablePauseOnInteraction` property + - enable the `HideNavigation` property - enable the `Vertical` property - add transition `Interval` - add custom `Indicator` for each slide @@ -254,8 +260,8 @@ Our carousel will look like this in the template: ```html Date: Mon, 28 Oct 2024 08:09:28 +0200 Subject: [PATCH 3/7] fix(carousel): use double quotes for mentionedTypes --- doc/en/components/layouts/carousel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/en/components/layouts/carousel.md b/doc/en/components/layouts/carousel.md index a5478021d..139a961f1 100644 --- a/doc/en/components/layouts/carousel.md +++ b/doc/en/components/layouts/carousel.md @@ -2,7 +2,7 @@ title: {Platform} Carousel | Infragistics _description: Use {ProductName} Carousel component to navigate through a collection of slides, cards or page-based interfaces with endless programmatic features. Try it now _keywords: {ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Carousel component, {Platform} Carousel control -mentionedTypes: ['Carousel'] +mentionedTypes: ["Carousel"] --- # {Platform} Carousel Overview From 6c63df8a61b60692c04ae8ce568f5c9259250025 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Tue, 29 Oct 2024 16:24:22 +0200 Subject: [PATCH 4/7] docs(carousel): hide animations section --- doc/en/components/layouts/carousel.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/doc/en/components/layouts/carousel.md b/doc/en/components/layouts/carousel.md index 139a961f1..405f18d07 100644 --- a/doc/en/components/layouts/carousel.md +++ b/doc/en/components/layouts/carousel.md @@ -185,6 +185,7 @@ This carousel is going to contain slides with forms and images: `sample="/layouts/carousel/components", height="600", alt="{Platform} Carousel With Components Example"` + ## Animations Animated slide transitions provide the end-users a nice experience when interacting with the carousel. @@ -207,6 +208,7 @@ The demo below demonstrates the different types of animations, which the carouse `sample="/layouts/carousel/animations", height="650", alt="{Platform} Carousel Animations Example"` + ## Navigation @@ -218,7 +220,9 @@ The navigation in the carousel can be handled by the user through navigation but By default, the carousel can be used on any touch-enabled device. + The carousel [animations](carousel.md#animations) are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications ([PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)). + ### Keyboard navigation @@ -264,7 +268,6 @@ Our carousel will look like this in the template: hide-navigation="true" vertical="true" interval="2000" - animation-type="fade" > From bb2f4b5971dc08db8beb7b403b6a1ba61e5d031a Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Wed, 30 Oct 2024 14:09:15 +0200 Subject: [PATCH 5/7] docs(carousel): enable animations section --- doc/en/components/layouts/carousel.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/doc/en/components/layouts/carousel.md b/doc/en/components/layouts/carousel.md index 405f18d07..b0f68d165 100644 --- a/doc/en/components/layouts/carousel.md +++ b/doc/en/components/layouts/carousel.md @@ -185,7 +185,6 @@ This carousel is going to contain slides with forms and images: `sample="/layouts/carousel/components", height="600", alt="{Platform} Carousel With Components Example"` - ## Animations Animated slide transitions provide the end-users a nice experience when interacting with the carousel. @@ -208,7 +207,6 @@ The demo below demonstrates the different types of animations, which the carouse `sample="/layouts/carousel/animations", height="650", alt="{Platform} Carousel Animations Example"` - ## Navigation @@ -220,9 +218,7 @@ The navigation in the carousel can be handled by the user through navigation but By default, the carousel can be used on any touch-enabled device. - The carousel [animations](carousel.md#animations) are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications ([PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)). - ### Keyboard navigation From 88182b9fbdf40337d801750b901435ba05ae2bfc Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Wed, 30 Oct 2024 14:16:21 +0200 Subject: [PATCH 6/7] docs(carousel): update code snippet with animation type --- doc/en/components/layouts/carousel.md | 1 + 1 file changed, 1 insertion(+) diff --git a/doc/en/components/layouts/carousel.md b/doc/en/components/layouts/carousel.md index b0f68d165..139a961f1 100644 --- a/doc/en/components/layouts/carousel.md +++ b/doc/en/components/layouts/carousel.md @@ -264,6 +264,7 @@ Our carousel will look like this in the template: hide-navigation="true" vertical="true" interval="2000" + animation-type="fade" > From 4879ce88123f0b156ea43ed0382e5f87216d74e9 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Thu, 31 Oct 2024 16:26:58 +0200 Subject: [PATCH 7/7] docs(carousel): minor changes --- doc/en/components/layouts/carousel.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/en/components/layouts/carousel.md b/doc/en/components/layouts/carousel.md index 139a961f1..46f9b1cb8 100644 --- a/doc/en/components/layouts/carousel.md +++ b/doc/en/components/layouts/carousel.md @@ -38,7 +38,7 @@ For a complete introduction to the {ProductName}, read the [*Getting Started*](. Now that you have the {ProductName} Carousel imported, you can start with a basic configuration of the `Carousel` and its slides. -Use the `Carousel` selector to wrap your `Slide`s. The slides may feature any valid html content inside, including other components. +Use the `Carousel` selector to wrap your slides. The slides may feature any valid html content inside, including other components. ```html @@ -131,7 +131,7 @@ To add {Platform} custom carousel indicators, use the `Indicator`: ``` -The {ProductName} Carousel component allows users to use different elements for the active and inactive state of a single indicator. It is mandatory to provide 2 elements for each slot (empty and active) when declaring an indicator, even if they are the same. +The {ProductName} Carousel component allows users to use different elements for the active and inactive state of a single indicator. It is mandatory to provide two elements for each slot (empty and active) when declaring an indicator, even if they are the same. ### Custom navigation buttons