autoHeight not applying same heigth on each item
Issue description:
When I apply autoHeight on my slider, the height isn't the same on each item
Demo link/slider setting:
- Slider Settings :
var slider = tns({
container: `#${carouselID}`,
items: 1,
slideBy: 1,
controls: false,
autoHeight: true,
controlsText: [
'<span class="visually-hidden">Précédent</span><i class="icon icon--carousel-prev"></i>',
'<span class="visually-hidden">Suivant</span><i class="icon icon--carousel-next"></i>'
],
nav: false,
navPosition: 'bottom',
loop: false,
responsive: {
540 : {
items: 2,
slideBy: 2,
gutter: 20
},
880 : {
items: 3,
slideBy: 3,
},
1200 : {
items: 4,
slideBy: 4,
}
}
});
- Screenshot : https://ibb.co/SxkdBQj
Tiny-slider version: 2.9.2 Browser name && version: Firefox 71.0 / Chrome 78.0.3904.108 OS name && version: MacOS 10.15.1
@MKlblangenois, The height issn't suppose to be the same on each item with autoHeight:true.
autoHeight: Height of slider container changes according to each slide's height.
So that means that your container will adapt to the height of the tallest visible item. However your items per say won't be equal height.
I can't seem to find an equal height option though, and it would be a nice feature to have.
@MKlblangenois, The height issn't suppose to be the same on each item with autoHeight:true.
autoHeight: Height of slider container changes according to each slide's height.
So that means that your container will adapt to the height of the tallest visible item. However your items per say won't be equal height.
I can't seem to find an equal height option though, and it would be a nice feature to have.
Have you already found a solution?
Old thread, but for ref, you can set the height on each item to be the same with CSS: .tns-slider { display: flex; } .tns-item { flex: 1; }