实现轮播作物文本答案

【问题标题】：Materialize Carousel Crops Text实现轮播作物文本
【发布时间】：2020-05-02 05:19:25
【问题描述】：

我有一个 Materialize 轮播，它在底部裁剪我的文本。我创建了一个非常简单的示例来查看它是否与内容有关。这就是我将 html 简化为：

        <div class="carousel carousel-slider">
        <div class="carousel-item" href="#one!">
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.LAST</p>
                </div>
        </div>
    </div>

最后一段被剪掉了。这是javascript：

    ...
    $('.carousel').carousel({
        fullwidth: true,
    });

    $('.carousel.carousel-slider').carousel({
        fullwidth: true,
        indicators: true,
        duration: 200,
    }, setTimeout(autoplay, 4500));

     function autoplay() {
       $('.carousel').carousel('next');
       setTimeout(autoplay, 4500);
     }

轮播看起来是固定的高度。我可以在 carousel 类中添加一个足够大的固定高度，以防止在手机上裁剪。这让我在桌面上留下了很大的空白空间。我试过将覆盖放在媒体查询中。它被忽略。有没有办法让它自动调整大小？我确实尝试过 height:auto;无济于事。

【问题讨论】：

标签： javascript html materialize

【解决方案1】：

解决这个问题的一种方法是根据内容的大小设置轮播的高度：

// Get height of content
var contentHeight = jQuery('.carousel-item.active div').height();

//Override the 3 height attributes that Materialize adds:

jQuery('.carousel').css('height', contentHeight);
jQuery('.carousel-item').css('height', contentHeight);
jQuery('.carousel-item').css('min-height', contentHeight);

将其包装在一个函数中，在页面加载时运行它，以及任何时候调整窗口大小：

function setCarouselHeight(){
   var contentHeight = jQuery('.carousel-item.active div').height();
   jQuery('.carousel').css('height', contentHeight);
   jQuery('.carousel-item').css('height', contentHeight);
   jQuery('.carousel-item').css('min-height', contentHeight);
}

setCarouselHeight();

$( window ).resize(function() {
  setCarouselHeight();
});

工作代码笔here。

更新

所以，再看一遍，实际上比最初看起来要困难得多。 Codepen 正在进行中。

问题在于，Materialize 会动态更新旋转木马的变换值以处理鼠标和触摸拖动 - 并且它通常会在不需要时将空格放在顶部。

我的解决方案现在变得非常复杂 - 第二个函数重新计算变换 X&Y 并相应地更新边距。

我希望看到一个更简单的解决方案。注意这个空间。

【讨论】：