@@ -97,7 +110,7 @@ export class Carousel extends React.Component {
onClick={() => { this.onCarouselButtonClicked(false); }} />
{
return "";
}
- const buttonsLocation = this.props.buttonsLocation ? this.props.buttonsLocation : CarouselButtonsLocation.top;
+ const buttonsLocation = this.props.buttonsLocation ? this.props.buttonsLocation : CarouselButtonsLocation.center;
let buttonsLocationCss = "";
switch (buttonsLocation) {
case CarouselButtonsLocation.top:
diff --git a/src/controls/carousel/ICarouselProps.ts b/src/controls/carousel/ICarouselProps.ts
index ffade1ae4..4c30103e5 100644
--- a/src/controls/carousel/ICarouselProps.ts
+++ b/src/controls/carousel/ICarouselProps.ts
@@ -82,12 +82,16 @@ export interface ICarouselProps {
/**
* Specifies the location of the buttons inside the container.
+ *
+ * Default: CarouselButtonsLocation.center
*/
- buttonsLocation: CarouselButtonsLocation;
+ buttonsLocation?: CarouselButtonsLocation;
/**
* Specifies the buttons container display mode.
+ *
+ * Default: CarouselButtonsDisplay.block
*/
- buttonsDisplay: CarouselButtonsDisplay;
+ buttonsDisplay?: CarouselButtonsDisplay;
/**
* Allows to specify own styles for carousel container.
@@ -221,4 +225,9 @@ export interface ICarouselProps {
*/
indicatorsContainerStyles?: ICssInput;
+ /**
+ * Allows to specify the height of the content. Can be used instead of providing styles for the content container.
+ */
+ contentHeight?: number;
+
}
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index 39ee5cce7..15532766c 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -1799,6 +1799,13 @@ export default class ControlsTest extends React.Component
+
+
Carousel with minimal configuration:
+
+