[Slick slider equal height slides]
Don't use javascript to make slick slider slides all the same height -- use flexbox!!!
.slick-track {
align-items: stretch;
display: flex; // or @include flexbox if you're using the flexbox mixin
}
.slick-slide {
// align-items: stretch only works if the child height is undefined/auto!
// slick slider's default is to give it height: 100%, which messes everything up
height: auto
}
// This almost works but needs some work.
// Except, don't do it -- it's a trap!
// Flexbox to the rescue!!!
function setHeights(optionalSelector) {
if (typeof optionalSelector === 'undefined') {
console.log('the optional selector is not being used');
let stories = document.querySelectorAll('.stories__slide .stories__overlay');
let movies = document.querySelectorAll('.stories__media-slide');
let photos = document.querySelectorAll('.stories__image-slide__image');
}
else {
console.log('the optional selector is being used');
let stories = document.querySelectorAll('${optionalSelector} .stories__slide .stories__overlay');
let movies = document.querySelectorAll('${optionalSelector} .stories__media-slide');
let photos = document.querySelectorAll('${optionalSelector} .stories__image-slide__image');
}
console.log('here are the stories: ');
console.log(stories);
console.log('here are the movies: ');
console.log(movies);
console.log('here are the photos: ');
console.log(photos);
let max = 0;
for(i = 0; i < stories.length; i++) {
stories[i].style.height = 'auto';
console.log('the height of ' + stories[i].parentElement.classList + ' is: ');
console.log(stories[i].offsetHeight);
if (stories[i].offsetHeight > max) {
max = stories[i].offsetHeight;
}
}
console.log("the tallest height is: " + max);
for (i = 0; i < stories.length; i++) {
stories[i].style.height = max +"px";
}
for (i = 0; i < movies.length; i++) {
movies[i].style.height = max +"px";
}
for (i = 0; i < photos.length; i++) {
photos[i].style.paddingTop = max +"px";
}
}
$(document).ready(setHeights);
$(window).resize(setHeights);