Материализация Карусель Урожай Текст

Question

У меня есть карусель Materialise, которая обрезает мой текст внизу. Я создал очень простой пример, чтобы понять, связано ли это с контентом. Это то, что я уменьшил 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);
     }

Карусель имеет фиксированную высоту. Я могу добавить фиксированную высоту в класс карусели, достаточно большой, чтобы предотвратить кадрирование на телефоне. Это оставляет меня с большим пустым пространством на рабочем столе. Я попытался разместить переопределение в медиа-запросах. Это игнорируется. Есть ли способ сделать это авто размера? Я попробовал высоту: авто; безрезультатно.

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

Рабочий код ручки здесь .

ОБНОВЛЕНИЕ

Так что, посмотрев на это снова, на самом деле гораздо сложнее, чем сначала кажется. Кодовая ручка сейчас находится в стадии разработки.

Проблема заключается в том, что Materialise динамически обновляет значения преобразования карусели для обработки перетаскивания мышью и касанием, а также часто поднимает пробел, когда в этом нет необходимости.

Мое решение становится очень сложным - вторая функция, которая пересчитывает X & Y преобразования и соответственно обновляется с запасом.

Я бы хотел увидеть более простое решение. Посмотрите это место.