How to ensure the slider height get's auto adjusted according to its content?

Design help General
1

Currently the slider mask is taking the height of the tallest slide…

All the slide’s cannot have the same height, as they would look awkward due to empty space in certain slides.

Objective is to ensure the content underneath is supposed to go up and down depending on their height…

Context

We have been trying to use the CMS feature for the slider so that we could add testimonials on a need basis just using the CMS without touching the layout…
This was not possible as the CMS slider feature is still in pipeline…

So the first alternative I tried was ‘Seamless-Pagination’, but this ended up causing duplicate title SEO issues due to the pagination effect on the URL, based on what we learned we understood that it was not possible* to ‘page=#’ part from the URL.

*Note: Incase if anyone feels like there is an option to do this please let us know

Now, we are using the finsweet CMS slider, but the height issue still persists as we are still using a slider linked to a CMS.

2

hi @brewvyn_here WF slider is very basic, the best way is to find slider that offer this option. One of these can be a Slick slider or Swiper slider. Feel free to use correct keywords in your favourite search engine to find one that will do best job for you.

3

Hey Nicola,

There’s another solution that worked for me which I found on forum. This css code made all other slides that are not showing to 0px height so that the Mask will adapt to the actuals slide and here’s the solution:

<style>
    .w-slide [aria-hidden="true"] {
         height: 0px;
    }
</style>
10 Likes
4

Thanks @cropot ! Just what I needed, and such a simple solution.

1 Like
5

Thanks @cropot , you saved me hours of research and trial/errors :blush:

1 Like
6

Hi @cropot, any idea how to delay the hiding of the slide until after it has slid out of view? I’m getting each slide snapping to a tiny height as it slides away.

7

@cropot Life saviour! Thank you so much!

1 Like
10

Thank you for this! Im having the same issue. Can someone let me know where/how to implement this? Do I drop this in the page heading custom code? Do I rename the “.w-slide” to my style name?

1 Like
11

This works, but isn’t smooth. For me, when I click to the next slide, the image of the current slide gets immediately hidden, and then slides to the next image, which makes it feel broken.