javascript 光滑滑块等高滑动

Posted 2021-05-03

.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);