impelement demo with guaranteed aspect-ratio (esm)

2 files changed, 37 insertions, 41 deletions

diff --git a/esm/scripts/presentation.js b/esm/scripts/presentation.js
index 42d8c05..47f174d 100644
--- a/esm/scripts/presentation.js
+++ b/esm/scripts/presentation.js
@@ -1,8 +1,8 @@
 export default {
 
-    name: 'test',
-    title: 'some presentation title',
-    base_url: 'https://swiperjs.com/demos/images',
+    name: 'Pitsos',
+    title: 'Pitsos',
+    base_url: 'images',
 
     effect: 'flip',
     pagination: 'dynamic',
@@ -11,23 +11,32 @@ export default {
         html,
         body {
             position: relative;
-            height: 100%;
         }
 
         body {
-            background: #abc;
+            background-color: rgb(153, 153, 153);
             font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
             font-size: 14px;
             color: #000;
             margin: 0;
             padding: 0;
+            display: flex;
+            height: 100vh;
+            overflow: hidden;
+            align-content: center;
+            align-items: center;
         }
 
         .swiper {
-            width: 80vw;
-            height: 80vh;
-            margin: 0 auto;
-            padding-top: 2em;
+            width: 90vw;
+            height: 50.62vw;
+        }
+
+        @media (min-aspect-ratio: 3.5/2) {
+            .swiper {
+                width: 150vh;
+                height: 90vh;
+            }
         }
 
         .swiper-slide {
@@ -39,39 +48,23 @@ export default {
             display: block;
             width: 100%;
         }
+        .swiper-pagination {
+            margin-top: 50px;
+        }
+
+        .swiper-pagination-bullet-active {
+            background: #ed8119;
+        }
+
+        .swiper-button-prev, .swiper-button-next {
+            color: #ed8119;
+        }
     `,
     slides: [
-        { image: 'nature-1.jpg' },
-        {
-            image: 'nature-2.jpg',
-            poi: [
-                {
-                    text: 'some label',
-                    style: [
-                        `{ position: absolute; top: 75%; left: 25%;
-                        font-size: 3em; font-family:Arial; font-weight:bold;
-                        color:#fff; background:#3337;
-                        border-radius: 6px; padding: 4px 8px; }`,
-                        ':hover { color:red; background: #222; }'
-                    ]
-                },
-                {
-                    text: 'some link',
-                    link: 'https://www.sklavenitis.gr',
-                    style: [
-                        ` a { position: absolute; top: 80%; left: 25%;
-                        font-size: 3em; font-family:Arial; font-weight:bold;
-                        color:#fff; background:#3337;
-                        border-radius: 6px; padding: 4px 8px; }`,
-                        ' a:hover { color:red; background: #222; }'
-                    ]
-
-                }
-            ]
-        },
-        { image: 'nature-3.jpg' },
-        { image: 'nature-4.jpg' },
-        { image: 'nature-5.jpg' }
+        { image: '01.jpg' },
+        { image: '02.jpg' },
+        { image: '03.jpg' },
+        { image: '04.jpg' },
     ]
 
 }
diff --git a/esm/scripts/slidetray.js b/esm/scripts/slidetray.js
index b34737c..f1ef2f7 100644
--- a/esm/scripts/slidetray.js
+++ b/esm/scripts/slidetray.js
@@ -16,7 +16,7 @@ const slidetray = (setup) => {
             theme: 'light',
             navigation: true,
             pagination: 'classsic',
-            keyboard: false,
+            keyboard: true,
             touch: true
         },
 
@@ -68,6 +68,9 @@ const slidetray = (setup) => {
                 }
                 args.pagination = pagi;
             }
+            if (json.keyboard) {
+                args.keyboard = { enabled: true }
+            }
             return args;
 
         },