Tiny-slider: autoHeight is ignored when gallery mode is used

[zipper]

__Issue description__: When option mode is set to gallery value, the autoHeight is always on. That is not expected behaviour I guess. I have a gallery of "banners", the height should be determined by the longest text (even though there is height set in demo, it works the same). With mode: "carousel" everything works as expected.

__Demo link/slider setting__: https://codepen.io/zipper/pen/vRPrZW

_Tiny-slider version_: 2.6.0
_Browser name && version_: Chrome 65 (doesn't really matter)
_OS name && version_: Windows 10 (doesn't really matter)

[ganlanyuan]

Should be fixed in this commit.

[ganlanyuan]

Should be fixed in v2.7.0

[akurfuerst]

Works with v2.7.0, but not with v.2.9.2.
I have tested some versions, it should work until v2.8.5 (v2.8.6 and higher isn't working anymore)

v2.7.0 https://codepen.io/anon/pen/GLzpRB ("content after slider" stays on his place)
v2.9.2 https://codepen.io/anon/pen/JVxYdN ("content after slider" stays not on his place)

[simonvomeyser]

Indeed @akurfuerst thanks for figuring that out.

Love the library @ganlanyuan but there is indeed a regression after 2.7.0

2.8.5 does keep its height internally but does not "push" the content beneath it down at all.

[danielpost]

Same issue here. Seems to be missing the tns-ah container when using gallery mode with autoHeight.

[dmcb]

This is very much still an issue in 2.9.2 @ganlanyuan.

[dmcb]

For anyone who stumbles upon this issue, this is a way to mitigate the issue.

In your slider options set:

tns({
    mode: 'carousel',
    speed: 0
});

And then add the following CSS rules:

    .tns-item {
        opacity: 0;
        transition: 0.3s opacity;
    }

    .tns-slide-active {
        opacity: 1;
    }

Setting the mode to carousel with a speed of 0 makes it behave like a gallery, but with the height of the slider staying consistent regardless of the slide height. However, there is no animation, so the CSS rules re-add it.

[eMtlk]

Temporary solution that I created in my project is:

add to onInit:

onInit: function (info) {       
    info.container.style.height = info.container.offsetHeight + 'px';
}

then create event listener on 'indexChanged'.

yourSliderInstance.events.on('indexChanged', function (info) {
    info.container.style.height = info.slideItems[info.index].scrollHeight + 'px';
}

then add transition to your main slider class, e.g.

.my-slider {
    transition: height .3s ease;
}

[norin89]

Bump. I need mode: 'gallery' with autoHeight: false too. @dmcb hack (https://github.com/ganlanyuan/tiny-slider/issues/180#issuecomment-504853407) is not for me as mode: 'carousel' uses overflow: hidden; :/

[milkovsky]

I can confirm, that the issue is present in 2.9.2. Please reopen.

[rustykowski]

as a hack you can also cancel the absolute positioning via css (while using mode: 'gallery'):

.tns-slider {
    display: flex;
}
.tns-item {
    margin-right: -100%;
    position: static !important;
}