XF 2.3 Implementing carousel

[stromb0li]

I'm trying to implement a carousel with some arbitrary images, but they are all different sizes. I want the width to be 100% the size of the carousel and if the height of the image is greater than say 445px, then clip/hide the rest of the content.

I currently have this, but it is pretty hacky and looks terrible on mobile. Is there a way to let the library handle mismatched image sizes without having to crop the images?

<xf:macro name="carousel_macros::setup" />

<ul class="carousel-body carousel-body--show1" data-xf-init="carousel" style="height:445px;overflow:clip;">
    <li class="carousel-container">
        <div class="carousel-item" style="overflow:hidden;">
            <img src="/image1.png" alt="Image 1" />
        </div>
    </li>
    <li class="carousel-container">
        <div class="carousel-item" style="overflow:hidden;">
            <img src="/image2.png" alt="Image 2" />
        </div>
    </li>
    <li class="carousel-container">
        <div class="carousel-item" style="overflow:hidden;">
            <img src="/image3.png" alt="Image 3" />
        </div>
    </li>
</ul>

Edit: I was thinking about this wrong, adjusting the carousel vs the image. Applied CSS to control the image and that worked well.

Unrelated though, is there a way to adjust how the coursel works per https://fancyapps.com/carousel/

For example, they have the animation progress bar on autoplay and left/right buttons. Is there a way to initialize those as well.

 

[Jeremy P]

For example, they have the animation progress bar on autoplay and left/right buttons. Is there a way to initialize those as well.

You would have to create your own JS handler (see js/xf/carousel.js for reference). I have made changes in the next version to move options and plugins out of the init method so that the existing handler can be extended more easily.