What I aim to achieve
https://i.sstatic.net/aNCWV.png
I attempted to create a condition-like statement:
[ Comparing the heights of the 3 elements ]
→ When all are smaller than the height of content:
- Stretches to the full height of content.
(justify-content: space-between;ormargin: auto;)
→ When it's greater than the content height:
ㅤ→ If the .middle element is the tallest among the 3:
- Stretch the other 2 elements (
.leftand.right) to the full height of the content.
ㅤ→ Otherwise:
- Compare the heights of the 2 elements other than
.middle(.leftand.right) and adjust the height of all (3 elements) to match the taller one.
By the way, why implement in JS instead of CSS:
I am already using flexbox.
However, when using swiper, I encountered two issues where ① the element from the previous slide moves to the next slide when the browser width/height changes & ② it cannot determine the correct height.
Therefore, I concluded that using JavaScript is necessary to "specify" the slide height and integrate it into swiper.
My current code
jQuery
function maxHeight() {
var maxH = 0;
var contentH = 'calc(100vh - 79px)';
$(".left, .middle, .right").each(function() {
if ($(this).height() <= contentH) {
$(".left, .right").css('justify-content', 'space-between');
$(".middle").css('height', '100%');
} else {
if ($(".middle").height() > $(".left, .right").height()) {
$(".left, .right").css({
'height':'calc(' + contentH + ' - 100px)',
'justify-content':'space-between'
});
$(".middle").css('height',contentH);
} else {
maxH = $(".left, .right").height();
$(".left, .middle, .right").height(maxH);
}
}
});
}
mySwiper.height = maxHeight();
Does this code accurately represent what I have described?
▼ Code only (The code snippet results may not look correct due to missing reset css)
/* The height alignment starts below this. */
/* swiper */
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: 'true',
},
keyboard: {
enabled: true,
},
mousewheel: {
forceToAxis: true,
invert: true,
},
renderBullet: function(index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
});
console.log(mySwiper.height);
/* height alignment */
function maxHeight() {
var maxh = 0;
var conh = 'calc(100vh - 79px)';
$(".left, .middle, .right").each(function() {
if ($(this).height() <= conh) {
$(".left, .right").css('justify-content', 'space-between');
$(".middle").css('height', '100%');
} else {
if ($(".middle").height() > $(".left, .right").height()) {
$(".left, .right").css({
'height': 'calc(' + conh + ' - 100px)',
'justify-content': 'space-between'
});
$(".middle").css('height', conh);
} else {
maxh = $(".left, .right").height();
$(".left, .middle, .right").height(maxh);
}
}
});
}
mySwiper.height = maxHeight();/* The content follows from this point. */
/* CSS code example */
body {
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: lightblue;
padding: 20px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<!-- The content continues below. -->
<div class="container">
<p>This is a sample container.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>