查找光滑滑块容器高度的问题

Posted 2023-02-25

【中文标题】查找光滑滑块容器高度的问题

【英文标题】：Issue with finding height of slick slider container

【发布时间】：2018-01-03 06:07:37

【问题描述】：

在尝试获取单击标题框后显示的光滑滑块的容器高度时遇到问题。

我正在尝试捕获高度并使用该高度将其他标题框向下移动正确的数量，但它会在三张幻灯片浓缩成光滑滑块之前捕获它们的高度，因此它会影响我的布局。我的容器最终高了约 3 倍，因为有 3 张幻灯片，它把其他标题框推得太低了。

这让我发疯了。有什么帮助吗？

https://codepen.io/Finches/pen/vpZqYR

// Show/hide content from clicking box title
$('.track-box-title').click(function() 
  //Get height of content
  var height = $(this).parent('.track-box').parent('.track-box-container').find('.track-content').height() + 250;

  console.log(height);

  //Convert height to string
  var heightStr = height.toString();

  //Toggle height and content box display
  if ($(this).parent('.track-box').parent('.track-box-container').height() == 200) 
      $(this).parent('.track-box').parent('.track-box-container').animate(height: heightStr);
      $(this).parent('.track-box').parent('.track-box-container').find('.track-content').show();
      // initialize slick slider
      $(this).siblings('.track-content').find('.project-image-slider').slick();
    
    else if ($(this).parent('.track-box').parent('.track-box-container').height() == height) 
      $(this).parent('.track-box').parent('.track-box-container').find('.track-content').hide();
      $(this).parent('.track-box').parent('.track-box-container').animate(height: "200px");
      $(this).siblings('.track-content').find('.project-image-slider').hide();
    

);

$('.close-btn').click(function() 
  $(this).parent('.content').parent('.track-content').hide();
  $(this).parent('.content').parent('.track-content').parent('.track-box').parent('.track-box-container').animate(height: "200px");
);

【问题讨论】：

通过将除第一张幻灯片之外的所有幻灯片的初始显示设置为无来解决此问题。

【参考方案1】：

当滑动滑块被正确加载时，“slick-initialized”类被添加。

你应该在你的 JS 选择器中使用它，然后它应该得到正确的高度。

【讨论】：

我尝试将其合并，但我的身高却是“空”。这是因为我直到达到我想的高度之后才显示父容器。关于如何在不弄乱光滑滑块的情况下解决此问题的任何想法？

通过将除第一张幻灯片之外的所有幻灯片的初始显示设置为无来解决此问题。