实现轮播作物文本

Question

I have a Materialize carousel that is cropping my text at the bottom. I created a very simple example to see if it was something to do with the content. This is what I reduced the html to:

        <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>

The last paragraph is cropped out. This is the 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);
     }

The carousel appears to be a fixed height. I can add a fixed height in the carousel class large enough to prevent cropping on a phone. That leaves me with a large blank space on a desktop. I've tried placing the override in media queries. It is ignored. Is there any way to make it auto size? I did try height:auto; to no avail.

Answer 1

One way to solve this is to set the height of the carousel based on the size of the content:

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

Wrap this in a function, run it on page load, and anytime the window is resized:

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

Working codepen here .

UPDATE

So, having looked at this again, it's actually much more difficult that it first seems. The codepen is a now work in progress.

The issue is that Materialize dynamically updates the transform values of the carousel to handle mouse and touch drag - and it is often putting whitespace up top when it is not needed.

My solution is getting very complicated now - a second function that recalculates the transform X&Y and updated with margin accordingly.

I would love to see a simpler solution. Watch this space.