diff options
| author | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2024-11-26 14:32:41 +0200 |
|---|---|---|
| committer | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2024-11-26 14:32:41 +0200 |
| commit | 8d308fe5f7a83d635ef14e95c8e9abc171f76c7e (patch) | |
| tree | fdd281ef4a5fe365b73cf909607f78dc48def03e /esm | |
| parent | 943f66c1c60c41c56b8ef0066478b69251f9048f (diff) | |
| download | slidetray-8d308fe5f7a83d635ef14e95c8e9abc171f76c7e.tar.gz slidetray-8d308fe5f7a83d635ef14e95c8e9abc171f76c7e.tar.bz2 slidetray-8d308fe5f7a83d635ef14e95c8e9abc171f76c7e.zip | |
impelement demo with guaranteed aspect-ratio (esm)
Diffstat (limited to 'esm')
| -rw-r--r-- | esm/images/01.jpg | bin | 0 -> 64394 bytes | |||
| -rw-r--r-- | esm/images/02.jpg | bin | 0 -> 55028 bytes | |||
| -rw-r--r-- | esm/images/03.jpg | bin | 0 -> 55148 bytes | |||
| -rw-r--r-- | esm/images/04.jpg | bin | 0 -> 79672 bytes | |||
| -rw-r--r-- | esm/index.html | 9 | ||||
| -rw-r--r-- | esm/scripts/presentation.js | 73 | ||||
| -rw-r--r-- | esm/scripts/slidetray.js | 5 |
7 files changed, 38 insertions, 49 deletions
diff --git a/esm/images/01.jpg b/esm/images/01.jpg Binary files differnew file mode 100644 index 0000000..bcecf28 --- /dev/null +++ b/esm/images/01.jpg diff --git a/esm/images/02.jpg b/esm/images/02.jpg Binary files differnew file mode 100644 index 0000000..fd46a3b --- /dev/null +++ b/esm/images/02.jpg diff --git a/esm/images/03.jpg b/esm/images/03.jpg Binary files differnew file mode 100644 index 0000000..9924a4a --- /dev/null +++ b/esm/images/03.jpg diff --git a/esm/images/04.jpg b/esm/images/04.jpg Binary files differnew file mode 100644 index 0000000..dec8c69 --- /dev/null +++ b/esm/images/04.jpg 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 @@ <body> <div class="swiper slidetray"> - <div class="swiper-wrapper"></div> - - <!-- - <div class="swiper-button-next"></div> - <div class="swiper-button-prev"></div> - <div class="swiper-pagination"></div> - --> - + <div class="swiper-wrapper"></div> </div> </body> 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; }, |
