Positioning of webflow slider arrows

Community resources
1

Hi all,

I have problem with the slider element.

  1. I would like to position the arrows of the slider at the bottom at the same level as the round circles (slider_nav_abalauf). How is that possible?

  2. I would like to decrease the height of the secion_ablauf while not having any blank / white elements in between the purple slider and the image. I would like to decrease the height of the image and slider element to the same extent. How would I do that?

2

Hi there,

To customize your slider, here’s how you can modify both the arrows and height:

For the slider arrows:

  1. Select the left and right arrow elements in the Navigator
  2. Apply flex settings to the arrow wrappers to control their position
  3. Add a class to the arrows
  4. In the Style panel, customize their appearance using:
    • Font size
    • Color
    • Background
    • Padding
    • Border radius

For the slider height:

  1. Select the Slider element
  2. In the Styles Panel, adjust the height using either:
    • Pixels (px) for fixed height
    • Viewport height (vh) for responsive height

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hi,

thank you! The above comments are not helping me to solve the issue. The class of the arrows is already flex.
Re. point 2 I want to adjust the entire section hight not only the slider element.

4

Hey @Samuel1993 ,

Had replied for the first use-case in a thread earlier. Referring it here as well.

For the height issue, sliders by default take up the height of the tallest content slide that you have. So in your case, since the second slide has more content, it adapts the height of the slider accordingly and hence the first slide comes up with a lot of extra space visually, thus increasing the height of the section.

As a workaround, you can include this code in the head section of the page after the accordion script that you have and see if it works:

<style>
  .ablauf_slide [aria-hidden="true"] {
    height: 0px;
  }
</style>

That being said, you could also explore some other Slider options like Swiper or Finsweet Sliders to explore such customization options in a better way. Hope this helps.