update rsponsive config

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',
           }
         }
     ```

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 = [
+	<div className="item" data-value="1">1</div>,
+	<div className="item" data-value="2">2</div>,
+];
+
+const Carousel = () => (
+	<AliceCarousel
+		mouseTracking
+		items={items}
+		responsive={responsive}
+	/>
+);
+```

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 = () => {
 		<section className="p-basic">
 			<AliceCarousel mouseTracking items={items} responsive={responsive} controlsStrategy="alternate" />
 			<TheCode html={markdown} />
+
+			<h2 className="title" style={{ paddingTop: 80 }}>
+				<Anchor {...genAnchorProps('responsive')} />
+				&nbsp; Responsive
+			</h2>
+			<AliceCarousel mouseTracking items={items.slice(0, 2)} responsive={responsive} />
+			<TheCode html={markdown2} />
 		</section>
 	);
 };

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,

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 = {

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<Props>, el: null | HTMLElement, canUseDom = false): State => {

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);
+	});
 });