Vertical Swiper + autoHeight

[niklasp]

Is your feature request related to a problem? Please describe. For many use cases, vertical sliders are the best solution. It would be a great addition to swiper if autoHeight would work for swipers with direction: 'vertical' as well.

Describe the solution you'd like I would love to see a swiper that works just like the autoHeight mode in horizontal, it should measure the height of the current slide (or if more than one, the heighest) and adjust the wrapper height to it.

Describe alternatives you've considered Fixed height sliders work well with vertical mode but that is not always the best solution.

Additional context @nolimits4web mentioned that it is only for 'horizontal', is there a reason for that?

I tried with custom css js and events to calculate the height correctly in the correct place but could not find the right event with the right code needed. The closest I could get is this codesandbox:

https://codesandbox.io/s/swiper-vertical-forked-2gklb?file=/index.html

The wrapper gets the correct height but the slide offset is wrong. A hint for a workaround would also be helpful. I nonetheless consider autoHeight + direction: vertical a very good match.

[benjamin3105]

It seems that this problem still exists. I recon more people want to use the autoHeight + direction: vertical combination. Have you found a workaround for this @niklasp? I'm still looking but when I find a solution I will let you know if you still need it ;)

[hasenov]

+1, same problem

[tunztunztunz]

Also having this issue. It takes up infinite space and causes the entire thing to be a real pain to style.

[mohammedrezq]

+1, as it mentioned the height get messed up, hope there is a way to solve this issue on vertical direction (At the moment I have disabled the option on vertical direction to avoid this issue).

[andreomcn]

+1

Im trying to create a vertical thumbnail navigation for a ecommerce product gallery and this issue came up.

my temporaly solution was manually set swiper-slide class css height to auto. but this gets messed up when loop = true

[antoniofalcone89]

+1 same here.

Any update about this?

[prate3k]

+1 facing same issue.

Swiper vertical height does not work when slides are of different heights (with or without virtualization enabled). Setting height to auto breaks the logic of setting top position since it still gets set on the basis of <total height> / number of vertical slide. Is there any workaround for this.

[yuuk]

Any update about this?

[marcruecker]

+1

Any update on this would be great.

[kappi94]

+1 would appreciate this feature

[kiyoshi-satoo]

This approach helped me.

https://codepen.io/pylvin/pen/WNJWexR

But it will not work if you use loop:true

[mostafa-nematpour]

+1, same problem

[mapsmarketing]

Same issue here. It would be great if autoHeight worked correctly with vertical

[enzocomics]

I would also love a fix for this to be implemented, please.

[marinvalentin]

Same problem

[barzles]

same problem

[cuonghuynh]

same problem

[mapsmarketing]

I've swapped it to use Slick Slider instead as the vertical nav works much better on it. It might not be as feature rich as swiper but at least it gets it done.

[sarah-baldin]

+1 same here :/ need it in combination with direction: "vertical" and loop: true. Any suggestions?

[shoxton]

+1 same here :/ need it in combination with direction: "vertical" and loop: true. Any suggestions?

I have ecommerce product page with the main (selected) image alongside with the product gallery on the left side. I've managed to accomplish what I needed by doing the following steps:

• a flex container with position: relative wrapping both sliders (vertical gallery slider and selected image slider).
• flex: 1 on gallery slider (you can change this to fit the horizontal width you need)
• flex: 5 on main image slider (you can change this to fit the horizontal width you need)
• position: absolute on the .swiper-wrapper child from the gallery slider (prevents from growing endlessly)
• slide images (img) from both sliders with width: 100%; height: 100%; object-fit: contain;

[realdaly]

same issue, any updates?

[mattbarnicle]

same here. switched to horizontal because i couldn't come up with a good solution.

[skyFi]

+1 Any update on this would be great.

[mrgvd]

Just use this

.your-slider .swiper-slide{ height: auto!important; }

[skyFi]

Thank you anyway, although it didn't work for me.

Just use this

.your-slider .swiper-slide{ height: auto!important; }

[JoshDHBW]

I have the same problem, a fix would be awesome.

[marinvalentin]

@all - just update to last version :)

[strarsis]

@marinvalentin: I am using the latest version of swiper (9.2.2) and still have this issue.

@mrgvd: In my particular case your fix (setting height: auto !important on the swiper slide element) indeed helped, thanks!

[Giovancruz]

Same here.

It looks like it's taking the height of the parent element to define the item height, if you set a fixed height for the swiper-wrapper then the slider item will work. It would be great to have an option like heightTarget or something like that which by default would be the parent element, but you could pass the children parameter, just guessing...

[hheinsoee]

because of #child_element < div class="swiper-slide" > < div id="child_element">Slide 1< /div> < /div>