實現輪播作物文本

Question

我有一個 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);
     }

旋轉木馬似乎是固定高度。 我可以在旋轉木馬 class 中添加一個足夠大的固定高度，以防止在手機上裁剪。 這讓我在桌面上留下了很大的空白空間。 我試過將覆蓋放在媒體查詢中。 它被忽略。 有沒有辦法讓它自動調整大小？ 我確實嘗試過 height:auto; 無濟於事。

Answer 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 中，在頁面加載時運行它，並且只要調整 window 的大小：

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 會動態更新輪播的變換值以處理鼠標和觸摸拖動 - 並且它通常在不需要時將空格放在頂部。

我的解決方案現在變得非常復雜 - 第二個 function 重新計算變換 X&Y 並相應地更新邊距。

我很想看到一個更簡單的解決方案。 關注此空間。