From 68346520b9123c5d28ec3b392101b6cad3de1d56 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Tue, 29 Oct 2024 11:29:35 +0200
Subject: [PATCH] docs(carousel): update topic with new properties

---
 en/components/carousel.md | 39 ++++++++++++---------------------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/en/components/carousel.md b/en/components/carousel.md
index b416e814b7..1168bb4715 100644
--- a/en/components/carousel.md
+++ b/en/components/carousel.md
@@ -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>
@@ -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>
@@ -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>
 ...