屏幕调整大小时文本不会调整大小答案

【问题标题】：Text does not resize on screen resize屏幕调整大小时文本不会调整大小
【发布时间】：2016-04-20 03:33:22
【问题描述】：

我正在使用此处看到的纯文本轮播： jsFiddle 这是我的调整大小代码：

window.addEventListener("resize", resetCarousel);
function resetCarousel(){
    setCarouselHeight('#carousel-text');
    $('#carousel-text').carousel({
        interval: 15000
    });

问题在于，当屏幕调整包含所有文本项的 div 的大小时，并没有相应地调整大小（即它没有响应）。 setCarouselHeight 函数用于确定所有文本项显示所需的最大高度。每次调整屏幕大小时，我都需要触发 setCarouselHeight。当我手动执行此操作时（即 window.onresize=func），即使在使用超时后，项目大小也会反映旧位置使用的大小，而不是调整大小的位置。任何见解将不胜感激。

【问题讨论】：

标签： javascript css twitter-bootstrap responsive-design carousel

【解决方案1】：

在玩了两天之后，哦，如此接近，我尝试了 Owl 旋转木马，并立即得到了我需要的东西。最后，它比引导程序简单得多。关键是使用 AutoHeight 示例并将 autoheight 设置为 false。它会自动将 div 调整为您拥有的最高文本，并且响应速度非常快。 http://owlgraphic.com/owlcarousel/index.html。希望这对某人有所帮助。

【讨论】：

【解决方案2】：

我认为不需要使用js 或owl 插件来响应滑块。这可以通过简单的css查询来完成。我的CSS如下：

.carousel-inner>.item{
  min-height:350px;
}
@media screen and (max-width:767px){
  .carousel-inner>.item{
    min-height:250px;
  }
}
@media screen and (max-width:569px){
  .carousel-inner>.item{
    min-height:200px;
  }
}

在jsfiddle查看我的现场演示

【讨论】：

谢谢，但我不确定我是否足够清楚地描述了这个问题。原始代码遍历所有文本项并为最大的一个预先设置容器的大小。这样一来，屏幕就不会因为不同的文本而以不同的大小跳来跳去。我想在旋转木马中做到这一点。我给您更改的示例在加载时可以使用，但是当您调整屏幕大小时它会失败。猫头鹰旋转木马完美无瑕。