文本不会在屏幕大小调整时调整大小

Text does not resize on screen resize

本文关键字：调整 屏幕 文本      更新时间：2023-09-26

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

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

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

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

我认为无需使用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上查看我的现场演示

相关文章：