tiny-slider icon indicating copy to clipboard operation
tiny-slider copied to clipboard

autoHeight not applying same heigth on each item

Open MKlblangenois opened this issue 6 years ago • 3 comments

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 avatar Dec 11 '19 10:12 MKlblangenois

@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.

thimmayya avatar Jun 09 '21 09:06 thimmayya

@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?

ilvoo avatar Oct 25 '21 00:10 ilvoo

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; }

drbiskit avatar Apr 21 '22 15:04 drbiskit