From 15d1486f987de4adb846ea149844abee12e1b623 Mon Sep 17 00:00:00 2001
From: midudev <miduga@gmail.com>
Date: Mon, 27 Jan 2020 10:20:15 +0100
Subject: [PATCH] Add new demo for different height slides

---
 pages/index.mdx | 26 +++++++++++++++++++++++++-
 src/index.scss  |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/pages/index.mdx b/pages/index.mdx
index 9e80efe..f892748 100644
--- a/pages/index.mdx
+++ b/pages/index.mdx
@@ -293,13 +293,37 @@ By default, slides uses the full width of the container. So, if you're using an
 </ReactSlidy>
 
 ```js showButton
-<ReactSlidy fullHeight imageObjectFit="contains" useFullWidth={false}>
+<ReactSlidy fullHeight imageObjectFit="contain" useFullWidth={false}>
   <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
   <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
   <img src="https://a.ccdn.es/nuevos/400/bmw/series3/2020/4sa_225.jpg" />
 </ReactSlidy>
 ```
 
+#### Adapt slides to use the height available
+
+If you have slides with different heights you need to specify the maxHeight to be  used for each slide, in order to avoid inner images or content to make the slider jump as they will automatically adapt to the available width and automatically detect the height.
+
+<div>
+  <ReactSlidy imageObjectFit="contain">
+    <img src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
+    <img src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
+    <img src="https://d.fotocasa.es/promotion/2018/03/26/19414824/2152752.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1982123.jpg" />
+  </ReactSlidy>
+</div>
+
+```js showButton
+<div>
+  <ReactSlidy imageObjectFit="contain">
+    <img src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
+    <img src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
+    <img src="https://d.fotocasa.es/promotion/2018/03/26/19414824/2152752.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1982123.jpg" />
+  </ReactSlidy>
+</div>
+```
+
 ## API 📖
 
 <Api />
diff --git a/src/index.scss b/src/index.scss
index 5e0501c..d2a0779 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -118,7 +118,7 @@ $react-slidy-mh: 50px !default;
         display: inline-block;
         position: relative;
         user-select: none;
-        vertical-align: top;
+        vertical-align: middle;
         width: 100%;
       }
     }