diff --git a/README.md b/README.md
index a24807c2..f9b9c6b3 100644
--- a/README.md
+++ b/README.md
@@ -100,14 +100,19 @@ const Gallery = () => {
- `paddingLeft`: Number, default `0` - Set the gallery offset from the left.
- `paddingRight`: Number, default `0` - Set the gallery offset from the right.
- `renderKey`: Number, default `undefined` - Auxiliary property, allows call the render method without changing the state inside the gallery instance.
-- `responsive`: Object, default `undefined` - Set number of items in the slide. The key is the breakpoint (default is the result of: () => window.innerWidth or `innerWidth` property if the last presented).
- ```js
+- `responsive`: Object, default `undefined` - The key is the breakpoint (default is the result of: () => window.innerWidth or `innerWidth` property if the last presented).
+ * `items` - set number of items in the slide. Default: `1`
+ * `itemsFit`: one of (`contain | fill | undefined`) - defines, how item should fill the container according slide's width. Default: `fill`.
+
+ If `contain` is specified, the gallery will use the value from the `items` property to determine the width of the element for each slide and fill in the empty space as needed.
+ ```js
{
0: {
items: 1,
},
1024: {
- items: 3
+ items: 3,
+ itemsFit: 'contain',
}
}
```
diff --git a/src/components/pages/basic/code-responsive.md b/src/components/pages/basic/code-responsive.md
new file mode 100644
index 00000000..bf07c69f
--- /dev/null
+++ b/src/components/pages/basic/code-responsive.md
@@ -0,0 +1,31 @@
+```javascript
+import React from 'react';
+import AliceCarousel from 'react-alice-carousel';
+import 'react-alice-carousel/lib/alice-carousel.css';
+
+const responsive = {
+ 0: {
+ items: 1
+ },
+ 568: {
+ items: 2
+ },
+ 1024: {
+ items: 3,
+ itemsFit: 'contain'
+ },
+};
+
+const items = [
+
1
,
+ 2
,
+];
+
+const Carousel = () => (
+
+);
+```
diff --git a/src/components/pages/basic/index.tsx b/src/components/pages/basic/index.tsx
index ad8fa69e..91f9cba7 100644
--- a/src/components/pages/basic/index.tsx
+++ b/src/components/pages/basic/index.tsx
@@ -1,13 +1,18 @@
import React from 'react';
import markdown from './code.md';
+import markdown2 from './code-responsive.md';
import TheCode from '../../the-code';
import AliceCarousel from '../../../lib/react-alice-carousel';
+import Anchor, { genAnchorProps } from '../../the-anchor';
const responsive = {
0: { items: 1 },
568: { items: 2 },
- 1024: { items: 3 },
+ 1024: {
+ items: 3,
+ itemsFit: 'contain',
+ },
};
const items = [
@@ -33,6 +38,13 @@ const BasicPage = () => {
);
};
diff --git a/src/lib/defaultProps.ts b/src/lib/defaultProps.ts
index 03973c66..ef6eb698 100644
--- a/src/lib/defaultProps.ts
+++ b/src/lib/defaultProps.ts
@@ -18,7 +18,7 @@ export const defaultProps = {
disableDotsControls: false,
disableSlideInfo: true,
infinite: false,
- innerWidth: 0,
+ innerWidth: undefined,
items: undefined,
keyboardNavigation: false,
mouseTracking: false,
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index c296b8cb..9dec8d57 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -87,9 +87,10 @@ export type Transition = {
};
export type Responsive = {
- [key: string]: {
- items: number;
- };
+ [key:string | number]: {
+ items: number,
+ itemsFit?: 'contain' | 'fill' | string;
+ }
};
export type EventObject = {
diff --git a/src/lib/utils/common.ts b/src/lib/utils/common.ts
index 1ab7d9f8..210ca246 100644
--- a/src/lib/utils/common.ts
+++ b/src/lib/utils/common.ts
@@ -48,17 +48,22 @@ export const getItemsInSlide = (itemsCount: number, props: Props) => {
if (configKeys.length) {
if (innerWidth || canUseDOM()) {
- const value = typeof innerWidth === 'number' ? innerWidth : window.innerWidth;
+ const value = innerWidth === undefined ? window.innerWidth : innerWidth;
configKeys.forEach((key) => {
if (Number(key) <= value) {
- itemsInSlide = Math.min(responsive[key].items, itemsCount) || itemsInSlide;
+ const { items, itemsFit = 'fill' } = responsive[key];
+ if (itemsFit === 'contain') {
+ itemsInSlide = items;
+ } else {
+ itemsInSlide = Math.min(items, itemsCount);
+ }
}
});
}
}
}
- return itemsInSlide;
+ return itemsInSlide || 1;
};
export const calculateInitialState = (props: Partial, el: null | HTMLElement, canUseDom = false): State => {
diff --git a/tests/utils/common/getItemsInSlide.test.ts b/tests/utils/common/getItemsInSlide.test.ts
index 13a6baa5..0076d419 100644
--- a/tests/utils/common/getItemsInSlide.test.ts
+++ b/tests/utils/common/getItemsInSlide.test.ts
@@ -39,4 +39,13 @@ describe('Utils.getItemsInSlide', function () {
it('should return correct value if responsive && innerWidth is 1024', function () {
expect(Utils.getItemsInSlide(3, { ...defaultProps, innerWidth: 1024, responsive })).toEqual(3);
});
+
+ it('should return correct value if responsive && itemsFit equal `contain`', function () {
+ expect(Utils.getItemsInSlide(2, { ...defaultProps, innerWidth: 0, responsive: {
+ 0 : {
+ items: 3,
+ itemsFit: 'contain'
+ },
+ }})).toEqual(3);
+ });
});