Vertical Swiper + autoHeight

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:27
  • Comments:15

github_iconTop GitHub Comments

8reactions
benjamin3105commented, Oct 15, 2021

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 😉

0reactions
marinvalentincommented, Dec 20, 2022

Same problem

Read more comments on GitHub >

github_iconTop Results From Across the Web

Swiper verticle auto height possible? - Framework7 Forum
new Swiper('.wb_body', { // Optional parameters direction: 'vertical', loop: false, autoHeight: true, resistanceRatio: '0', ...
Read more >
Setting the correct height in vertical mode in Swiper
I can not set a dynamic height for the swiper in vertical mode via none of the suggested solutions to this problem.
Read more >
Swiper Demo 38 Auto Height - StackBlitz
Swiper demo: Auto Height.
Read more >
Swiper API
autoHeight, boolean, false. Set to true and slider wrapper will adapt its height to the height ... Can be 'horizontal' or 'vertical' (for...
Read more >
Auto Height - Webflow CMS Swiper Sliders | Flow Ninja
Start using sliders with your CMS in just a few clicks in Webflow. All possible use-cases carefully crafted into a single Free Resource....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found