swiper images height
This commit is contained in:
parent
4c537bf529
commit
d89f8d2ae2
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: 'Article 5'
|
||||
media_order: 'lake-8357182_1280.jpg,mountains-8497575_1280.jpg,sparrow-8387465_1280.jpg'
|
||||
media_order: 'lake-8357182_1280.jpg,mountains-8497575_1280.jpg,sparrow-8387465_1280.jpg,pexels-tizzy-19933656.jpg,pexels-thanh-luu-29104820-20344850.jpg,mahee.mp4'
|
||||
date: '14-03-2024 11:38'
|
||||
---
|
||||
|
||||
|
|
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
After Width: | Height: | Size: 1.4 MiB |
|
@ -44,6 +44,10 @@
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
|
@ -299,7 +303,6 @@ article #article-wrapper .article-header .close-article div:last-of-type {
|
|||
transform: rotate(-45deg);
|
||||
}
|
||||
article #article-wrapper .swiper {
|
||||
max-height: 40vh;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
|
@ -308,11 +311,18 @@ article #article-wrapper .swiper .swiper-wrapper .swiper-slide {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 7vw;
|
||||
display: flex;
|
||||
height: auto;
|
||||
align-items: center;
|
||||
}
|
||||
article #article-wrapper .swiper .swiper-wrapper .swiper-slide img {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
}
|
||||
article #article-wrapper .swiper .swiper-wrapper .swiper-slide video {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
}
|
||||
article #article-wrapper .swiper .swiper-button-prev, article #article-wrapper .swiper .swiper-button-next {
|
||||
color: #000;
|
||||
transform: scale(0.5);
|
||||
|
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OApCA;EAqCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,kBAtDA;EAuDA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBAxEU;EAyEV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAlFN;EAmFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAlGU;EAmGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBA/KN;;AAkLF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OA5LE;;AA8LN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBA9NE;EA+NF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OAjPR;EAkPQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;;AACA;EACI;EACA;;AAIZ;EACI,OAjSJ;EAkSI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OA7SM;EA8SN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OAxCA;EAyCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,kBA1DA;EA2DA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBA5EU;EA6EV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAtFN;EAuFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAtGU;EAuGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBAnLN;;AAsLF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OAhME;;AAkMN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBAlOE;EAmOF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OArPR;EAsPQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,OA3SJ;EA4SI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OAvTM;EAwTN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"}
|
|
@ -19,9 +19,12 @@ $(document).ready(function() {
|
|||
body.style.overflowY = "auto";
|
||||
}
|
||||
let swiperEl = document.querySelector('.swiper');
|
||||
initSwiper();
|
||||
if (swiperEl) {
|
||||
setSwiperHeight(swiperEl);
|
||||
swiperEl.style.opacity = 1;
|
||||
resizeVerticalImages();
|
||||
}
|
||||
initSwiper();
|
||||
barba.init({
|
||||
transitions: [{
|
||||
name: 'opacity-transition',
|
||||
|
@ -38,19 +41,25 @@ $(document).ready(function() {
|
|||
}]
|
||||
});
|
||||
barba.hooks.before((data) => {
|
||||
if (swiperEl) {
|
||||
swiperEl.style.opacity = 0;
|
||||
}
|
||||
});
|
||||
barba.hooks.after((data) => {
|
||||
swiperEl = document.querySelector('.swiper');
|
||||
if (swiperEl) {
|
||||
setSwiperHeight(swiperEl);
|
||||
resizeVerticalImages();
|
||||
if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
|
||||
initSwiper();
|
||||
body.style.overflowY = "hidden";
|
||||
}
|
||||
swiperEl.style.opacity = 1;
|
||||
} else {
|
||||
body.style.overflowY = "auto";
|
||||
}
|
||||
swiperEl.style.opacity = 1;
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
function initSwiper() {
|
||||
|
@ -73,3 +82,7 @@ function resizeVerticalImages() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setSwiperHeight(swiperEl) {
|
||||
console.log(swiperEl);
|
||||
}
|
|
@ -61,6 +61,10 @@ $bgColor: #fff;
|
|||
}
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
|
@ -319,7 +323,6 @@ article {
|
|||
}
|
||||
}
|
||||
.swiper {
|
||||
max-height: 40vh;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
|
@ -328,10 +331,17 @@ article {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 7vw;
|
||||
display: flex;
|
||||
height: auto;
|
||||
align-items: center;
|
||||
img {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
}
|
||||
video {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
|
|
|
@ -31,6 +31,11 @@
|
|||
<img src="{{ image.url }}" alt="{{ page.title }}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for video in page.media.videos %}
|
||||
<div class="swiper-slide">
|
||||
<video controls src="{{ video.url }}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue