Differents height for images

[Vanlen1er]

Is your feature request related to a problem? Please describe. For a web application, we let users upload images, but we end up with images of different sizes

Describe the solution you'd like It is possible to have a height that changes according to the size of the images rather than the size of the images ?

Additional context At the end of this slider, there is an example of Autoheight

I like your slider, very easy to use :)

[nicped]

Thank you for using our slider! I am sure you can do what you want - will make an example during the next day.

[Vanlen1er]

Ok thx. I try but I think i'm not completly ok with CSS grid and advanced settings :)

[nicped]

Not as easy as I thought. Had to use a bit of JS to make this one work.

<div class="swiffy-slider slider-nav-chevron slider-nav-dark slider-nav-outside-expand slider-nav-visible slider-nav-animation" id="unevenimages">
    <div class="slider-container" style="overflow: hidden;">
        <div id="slide1"><img src="../assets/img/photos/img1.webp" alt="..." loading="lazy" class="mh-100 mw-100"></div>
        <div id="slide3"><img src="../assets/img/brandlogos/bootstrap-5.svg" alt="..." loading="lazy" class="mh-100 mw-100"></div>
        <div id="slide2"><img src="../assets/img/movies/cinema.webp" alt="..." loading="lazy" class="mh-100 mw-100"></div>
        <div id="slide4"><img src="../assets/img/shoes/shoe1.webp" alt="..." loading="lazy" class="h-100 mw-100"></div>
        <div id="slide5"><img src="../assets/img/swiffysliderlogo/GithubSocial.png" alt="..." loading="lazy" class="mh-100 mw-100"></div>
        <div id="slide6"><img src="../assets/img/swiffysliderlogo/SwiffySliderLogo1.png" alt="..." loading="lazy" class="mh-100 mw-100"></div>
    </div>

    <button type="button" class="slider-nav" aria-label="Go to previous"></button>
    <button type="button" class="slider-nav slider-nav-next" aria-label="Go to next"></button>

    <div class="slider-indicators">
        <button aria-label="Go to slide" class="active"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
    </div>
</div>

<script>
    window.addEventListener('load', () => {
        const resizeSlider = () => {
            document.getElementById('unevenimages').style.height = (document.querySelector('#unevenimages .slide-visible img').offsetHeight + 1) + 'px';
        };
        let sliderElement = document.getElementById('unevenimages');
        swiffyslider.onSlideEnd(sliderElement, resizeSlider, 50);
    });
</script>

This is also published in examples.

[Vanlen1er]

Oh thank you ! But I think something gone wrong with your exemple, on the exemple page (I don't see the images). Let's say, I include videos on the slider, this solution don't work. And it's not working for the first image. The resize is only after I click on the next button for the second image. And maybe, a smooth transition :)

[Vanlen1er]

If you want, this is the slider code on the page : https://www.canassonandco.com/canasson/rider/professionalinfo/3 3 slides, the first 2 images are jpg, the last is a video. So it change the code if the media is image or video.

[nicped]

Yeah, that is because my example is looking for this selector in the js: #unevenimages .slide-visible img So that requires that you element inside each slide is an img tag.

But you can change the selector to something like this: #unevenimages .slide-visible .slide_height And then mark the element with the slide_height inside each slide that has the height you want to resize to

<div id="slide1"><img src="../assets/img/photos/img1.webp" alt="..." loading="lazy" class="mh-100 mw-100 slide_height"></div>

<div id="slide2"><div autoplay="0" class="youtube_player slide_video slide_height" controls="1" ...></div></div>

[Vanlen1er]

Sorry to bother you but I think there is something I don't understand because my video makes the div have a height of 1px. If I change .slide-visible with just li, the hight don't change

[nicped]

You must use the dev tools in your browser to find an element in the video slides that has the correct height - and then apply the class to that element.

[Vanlen1er]

Ok, it works thx. One last question, the first image is not resized when you land on the page. Any idea? Thanks

[nicped]

Good point - you need to call the resize when the page load:

<script>
    window.addEventListener('load', () => {
        const resizeSlider = () => {
            document.getElementById('unevenimages').style.height = (document.querySelector('#unevenimages .slide-visible img').offsetHeight + 1) + 'px';
        };
        let sliderElement = document.getElementById('unevenimages');
        swiffyslider.onSlideEnd(sliderElement, resizeSlider, 50);
       resizeSlider();
    });
</script>

And make sure you set the class .slide-visible on the first slide!