Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(carousel): update topic with new properties #5983

Merged
merged 1 commit into from
Nov 4, 2024
Merged

docs(carousel): update topic with new properties #5983

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 12 additions & 27 deletions en/components/carousel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,19 +121,7 @@ export class HomeComponent {

By default, the Carousel in Angular has its **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** input property set to `true` ( *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 `loop` input to `false`.

To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by adding an empty template.

The carousel template may look like this:

```html
<div class="carousel-container">
<igx-carousel #carousel [loop]="false">
...
<!-- Adding an empty template to disable carousel's indicators -->
<ng-template igxCarouselIndicator></ng-template>
</igx-carousel>
</div>
```
To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by setting the `indicators` input property to `false`.

### Custom indicators
<div class="divider--half"></div>
Expand Down Expand Up @@ -279,12 +267,13 @@ The carousel [animations](carousel.md#angular-carousel-animations) are fully sup
### Keyboard navigation
<div class="divider--half"></div>

* To navigate to the **next**/**previous** slide, you have to use, respectfully:
* `Arrow Right` key for the next slide
* `Arrow Left` key for the previous slide
* To navigate to the **end**/**start** slide you have to use, respectfully:
* `End` key for the end slide
* `Home` key for the start slide
* 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
<div class="divider--half"></div>
Expand Down Expand Up @@ -312,14 +301,10 @@ Our carousel will look like this in the template:
```html
...
<div class="carousel-wrapper">
<igx-carousel [navigation]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
<div class="slides-wrapper">
<igx-slide *ngFor="let item of slides">
<!-- Slides content goes here -->
</igx-slide>
</div>
<!-- Adding an empty template to disable carousel's indicators -->
<ng-template igxCarouselIndicator></ng-template>
<igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
<igx-slide *ngFor="let item of slides">
<!-- Slides content goes here -->
</igx-slide>
</igx-carousel>
</div>
...
Expand Down
Loading