时间戳

首页 > 解决方案 > 实现轮播作物文本

javascript - 实现轮播作物文本

问题描述

我有一个 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; 无济于事。

标签： javascripthtmlmaterialize

解决方案

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

// 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();
});

在这里工作codepen 。

更新

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

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

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

我很想看到一个更简单的解决方案。关注此空间。

推荐阅读