From 8d308fe5f7a83d635ef14e95c8e9abc171f76c7e Mon Sep 17 00:00:00 2001 From: Geo Halkiadakis Date: Tue, 26 Nov 2024 14:32:41 +0200 Subject: impelement demo with guaranteed aspect-ratio (esm) --- README.md | 18 +++++------ esm/images/01.jpg | Bin 0 -> 64394 bytes esm/images/02.jpg | Bin 0 -> 55028 bytes esm/images/03.jpg | Bin 0 -> 55148 bytes esm/images/04.jpg | Bin 0 -> 79672 bytes esm/index.html | 9 +----- esm/scripts/presentation.js | 73 ++++++++++++++++++++------------------------ esm/scripts/slidetray.js | 5 ++- 8 files changed, 45 insertions(+), 60 deletions(-) create mode 100644 esm/images/01.jpg create mode 100644 esm/images/02.jpg create mode 100644 esm/images/03.jpg create mode 100644 esm/images/04.jpg diff --git a/README.md b/README.md index 58da595..896590d 100644 --- a/README.md +++ b/README.md @@ -95,19 +95,15 @@ let presentation = { ``` +## TODO: -## TODO: check if url is not broken +* guarantee aspect ratio -https://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax -https://stackoverflow.com/questions/1591401/javascript-jquery-check-broken-links +* check if url is not broken + - https://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax + - https://stackoverflow.com/questions/1591401/javascript-jquery-check-broken-links - - - -## TODO: custom effects - -brainstorming: - -* https://codepen.io/paralleluniv3rse/pen/yGQjMv \ No newline at end of file +* custom effects, ex: + - https://codepen.io/paralleluniv3rse/pen/yGQjMv \ No newline at end of file diff --git a/esm/images/01.jpg b/esm/images/01.jpg new file mode 100644 index 0000000..bcecf28 Binary files /dev/null and b/esm/images/01.jpg differ diff --git a/esm/images/02.jpg b/esm/images/02.jpg new file mode 100644 index 0000000..fd46a3b Binary files /dev/null and b/esm/images/02.jpg differ diff --git a/esm/images/03.jpg b/esm/images/03.jpg new file mode 100644 index 0000000..9924a4a Binary files /dev/null and b/esm/images/03.jpg differ diff --git a/esm/images/04.jpg b/esm/images/04.jpg new file mode 100644 index 0000000..dec8c69 Binary files /dev/null and b/esm/images/04.jpg differ diff --git a/esm/index.html b/esm/index.html index 5d10980..08791eb 100644 --- a/esm/index.html +++ b/esm/index.html @@ -9,14 +9,7 @@

- - - +

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; }, -- cgit v1.2.3