diff --git a/packages/oui-slideshow/README.md b/packages/oui-slideshow/README.md
index 9a0a5c17..9dbd843c 100644
--- a/packages/oui-slideshow/README.md
+++ b/packages/oui-slideshow/README.md
@@ -78,16 +78,40 @@
```
+### Panel change event
+**Note**: If you want to access the parameters inside `on-panel-change` callback, you need to use `direction` and `index` variables as below.
+
+* `direction` returns string of `prev` or `next`
+* `index` returns index of current slide
+
+```html:preview
+
+
+
+ Display your infrastructure as a list
+
+
+ Designed to help you synchronize your local Active Directory with your OVH Active Directory.
+
+
+
+```
+
## API
### oui-slideshow
-| Attribute | Type | Binding | One-time Binding | Values | Default | Description
-| ---- | ---- | ---- | ---- | ---- | ---- | ----
-| `theme` | string | @? | yes | n/a | `default` | add specific theme to component
-| `loading` | boolean | | no | `true`, `false` | `false` | display loader flag
-| `loop` | boolean | | no | `true`, `false` | `false` | whether the component should cycle continuously
-| `on-dismiss` | function | & | no | n/a | n/a | dismiss callback
+| Attribute | Type | Binding | One-time Binding | Values | Default | Description
+| ---- | ---- | ---- | ---- | ---- | ---- | ----
+| `theme` | string | @? | yes | n/a | `default` | add specific theme to component
+| `loading` | boolean | | no | `true`, `false` | `false` | display loader flag
+| `loop` | boolean | | no | `true`, `false` | `false` | whether the component should cycle continuously
+| `on-dismiss` | function | & | no | n/a | n/a | dismiss callback
+| `on-panel-change` | function | & | no | direction, index | n/a | handler triggered when on click of next slide
### oui-slideshow-panel
diff --git a/packages/oui-slideshow/src/index.spec.js b/packages/oui-slideshow/src/index.spec.js
index 308549d7..db867489 100644
--- a/packages/oui-slideshow/src/index.spec.js
+++ b/packages/oui-slideshow/src/index.spec.js
@@ -142,6 +142,22 @@ describe("ouiSlideshow", () => {
$timeout.flush();
expect($firstPanel.hasClass("active")).toBe(false);
});
+
+ it("should call function of event with attributes", () => {
+ const onPanelChangeSpy = jasmine.createSpy("onPanelChangeSpy");
+ const element = TestUtils.compileTemplate(`
+
+
+
+ `, {
+ onPanelChangeSpy
+ });
+ const direction = "next";
+ const index = 1;
+ $timeout.flush();
+ getNextButton(element).triggerHandler("click");
+ expect(onPanelChangeSpy).toHaveBeenCalledWith(direction, index);
+ });
});
});
});
diff --git a/packages/oui-slideshow/src/slideshow.component.js b/packages/oui-slideshow/src/slideshow.component.js
index 401d3367..53303aed 100644
--- a/packages/oui-slideshow/src/slideshow.component.js
+++ b/packages/oui-slideshow/src/slideshow.component.js
@@ -9,6 +9,6 @@ export default {
onDismiss: "&",
loading: "",
loop: "",
- theme: "@?"
+ onPanelChange: "&"
}
};
diff --git a/packages/oui-slideshow/src/slideshow.controller.js b/packages/oui-slideshow/src/slideshow.controller.js
index ab99f162..9fd4b9ed 100644
--- a/packages/oui-slideshow/src/slideshow.controller.js
+++ b/packages/oui-slideshow/src/slideshow.controller.js
@@ -76,12 +76,14 @@ export default class {
next () {
if (!this._isSliding) {
this._slide(Direction.NEXT);
+ this.onPanelChange({ direction: Direction.NEXT, index: this.currentIndex });
}
}
prev () {
if (!this._isSliding) {
this._slide(Direction.PREV);
+ this.onPanelChange({ direction: Direction.PREV, index: this.currentIndex });
}
}