Swiper: Feature request: Auto-height

[mintbird]

It would be better if Swiper's container can change their height to fit the current slide (for a different height slides)

Thanks for such great slider!

[Rikk]

I would like to see this feature too!

It would need to have some kind of smooth transition for the position of pagination and next/prev buttons...

[nolimits4web]

Would be could but unusable on mobiles because of slow animation of width/height, will think about it

[Rikk]

Vlad, do you know any workaround until then?
Currently, the entire container (and thus all slides) acquires the height of the taller slide.
I thought a workaround could be truly hiding (display:none) the slides that are not displayed, but I don't know how because it should be done by js as I'm sure Swiper does a lot of calculations of height/width.

[nolimits4web]

Is in it a better way (especially if you use mobile app) to set in css?

.swiper-slide {
  height:100%;
  overflow:auto;
}

Or if you really need to change container size, you may use callbacks:

...
onSlideChangeStart: function (s) {
  $('.swiper-container").css({
    height: s.slides.eq(s.activeIndex).height()
  })
}

[pouipouidesign]

I haven't been able to get a swiper that properly resizes with either the CSS or JS solutions you provide here, and I really miss this option from previous version, please reconsider and re-implement it in the new version!

[nolimits4web]

But there wasn't such option in previous version :)

[pouipouidesign]

There was a "calculateHeight" option though, in my mind it pretty much did the same thing?
Also, the "cssWidthAndHeight" option could then be used to make sure nothing was fixed but in CSS, right?

In any case, I have differing heights on my slides and as much as I like swiper I can't very well have a slideshow that is 3 times too high and lets appear the other slides :(

[nolimits4web]

Those options doesn't have any common with correcting swiper-height depending on current slide height. Anyway, i'll consider it

[pouipouidesign]

I thought the first one I mentioned did, sorry for the mistake.
As for the second one, I didn't say anything about "correcting", just that it didn't impose JS-set dimensions and let it all in the hands of CSS (at least that's what I understand from the doc's description of it).

Anyway, thanks for considering it, and let me know if/how I can help with that!

[naoyeye]

an helpful feature. +1

[r4fx]

+1, wating for this feature.

[lorekadam]

+1, wating for this feature.

[tmikaeld]

Looking for this exact feature, Flexslider seems to have this by default.

[ghost]

+1, wating for this feature.

[anys]

Hi.. Here is my solution that I have.

    onTransitionStart: function(mySwiper) {
           $('.swiper-slide').removeAttr('style');
            $('.swiper-container').removeAttr('style');     
    }

You may remove the attribute of style while the transition is start then onSlideChangeStart will reset back the style.

Thanks.

[nortin]

@anys
could you pls post a more complete (JS-)context of your snippet ...where to put it?
thanks a lot

[anys]

Hi @nortin

Here is my full setting of swipper.

var winWidth = $(window).width();
var mySwiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    //paginationClickable: true,
    paginationBulletRender: function(index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
    paginationClickable: false,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    allowSwipeToPrev: true,
    onSlideChangeStart: function(mySwiper) {
        var activeIndex = mySwiper.activeIndex;
        $('#page').text(activeIndex);
        changeNav();
        revisePage(activeIndex);
        activePage.push(activeIndex + 1);
        activePage.sort();
        if (activeIndex === 4) {
            activePage.push(5);
            $(".swiper-pagination-bullet").each(function(index) {
                $(this).addClass('swiper-pagination-bullet-activated');
            });                
        }
        var currSlideHeight = mySwiper.slides.eq(activeIndex).height();
        $('.swiper-container').css({
            height: currSlideHeight+'px'
        }); 
        // console.log(currSlideHeight);
    },
    onInit:function(mySwiper) {
        var currSlideHeight = mySwiper.slides.eq(0).height();
        if (winWidth < 767){
            $('.swiper-container').css({
                height: currSlideHeight+'px'
            });                 
        }
    },
    onTransitionStart: function(mySwiper) {
        if (winWidth < 767){
            $('.swiper-slide').removeAttr('style');
            $('.swiper-container').removeAttr('style');
        }     
    }
});

Hope you guys can get what I'm trying to :+1: but my code is only applied for Mobile version. so may ignore the winWidth.

[nortin]

@anys
fantastic . help a LOT !
thank you very much
: )

[anys]

@nortin awesome.. ;)

[r4fx]

I broke up with swiper, now i'm in love with bxslider (http://bxslider.com) where a lot of simple things are out of the box

[mintbird]

Now i'm using slick ( https://kenwheeler.github.io/slick/ ) It's also better than bxslider and can be used as a content slider (this requires an auto-height feature that not existing in swiper)

[r4fx]

bxslider can get content too, thx. for link to the slick, very nice alternative.